Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS The Selectors Solution

Posted by vincenzo IEVA
.a{fill-rule:evenodd;}techdegree seal-36
vincenzo IEVA
Front End Web Development Techdegree Graduate 14,211 Points

Hi, what would be the difference between ul > li{..} and ul li{..}?

Hi, what would be the difference between ul > li{..} and ul li{..}? I mean, are they the same thing?

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The ">" is the direct child selector. The item on the left must be the direct parent of the item on the right.

A space creates a descendant selector, where the item on the left must be a container of the item on the right, but there could be any number of elements in between.

They are likely to appear to work similarly, because the rules of HTML say that all the children of a "ul" must be "li" elements. But where lists are nested they could differ. For example:

<ul>
  <li>                  <!-- this would be selected by either -->
    <ol>
      <li> ... </li>    <!-- this would be selected by "ul li" but not by "ul > li" -->
    </ol>
  </li>
</ul>