Question

I tried to implement the following in less:

nav > ul > li:first-child

using:

nav {   
      ul {
          li:first-child {

However the result was:

nav ul li:first-child

Can someone explain the difference between the two CSS results and also tell me how I can use less to get the result “nav > ul > li:first-child”

Answer 1

> is called child combinator.

It selects the “direct successor/child” which is exactly one level below it’s parent while the normal style selects all child elements below the parent.

<div id="level-1">
  <div id="level-2">
     <div class="level-3"></div>
     <div class="level-3"></div>
  </div>
</div>

#level-1 > div{} /* <- matches #level-2 div */
#level-1 div{}   /* <-matches #level-2 and both .level-3 divs */

for clarification i added a Fiddle.

as for sass you can use:

#level-1{
    > div{
    }
}