How to write nested CSS classes with arrow sign in SASS?

Question

How to write the below css code with arrows in sass?

.membersList ul.pagination > .active > a {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

What's the difference between above and below

CSS:

.membersList ul.pagination .active a {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

SASS:

 .membersList
{
 ul.pagination {
   .active 
   {
     a {
        background-color: #4CAF50;
        color: white;
        border: 1px solid #4CAF50;
    }
   }
 }
}

See this SO question on `>` [**What does the ">" (greater-than sign) CSS selector mean?**](http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) which should highlight the difference when using `>` vs not using it. Documentation on [**Child Combinator**](https://www.w3.org/TR/selectors/#child-combinators) — Nope, Mar 13 '17 at 09:46

ssc-hrep3 · Answer 1 · 2017-03-13T09:53:50.517

The difference between .membersList ul.pagination > .active > a and .membersList ul.pagination .active a is, that .active has to be in the first case an immediate child of ul.pagination and in the second case, it can be also lower (with intermediate elements in between). The same is true for the a element.

For example, with the following HTML structure you can see the difference:

Selector .membersList ul.pagination > .active > a
Selector .membersList ul.pagination .active a

HTML structure, matches 1+2: .membersList → ul.pagination → .active → a

HTML structure, matches only 2: .membersList → ul.pagination → li → .active → a

HTML structure, matches only 2: .membersList → ul.pagination → li → .active → span → a

You can use the arrow sign in SASS as well:

.membersList {
   ul.pagination {
      > .active {
         > a {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
         }
      }
   }
}

How to write nested CSS classes with arrow sign in SASS?

1 Answers1