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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Fabrice Triboix
Fabrice Triboix
6,858 Points
Posted by Fabrice Triboix
Fabrice Triboix
6,858 Points

CSS: Descendant selector and <ul>

Hello,

I am currently doing the 'Build an HTML website' course, and I have a question about CSS descendant selectors.

Let's suppose I have the following HTML code:

<header>
  <div>
    <ul>
      <li>item 1
      <li>item 2
      <li>item 3
    </ul>
  </div>
<header>

According to the videos, to select the list items inside the div inside the header, I should use:

header div li: { bla }

I would have expected something more like:

header div ul li: { bla }

That is: select all the list elements inside the unordered list inside the div inside the header. That looks logical to me...

I tried it and it does not work. Could anyone let me know what is wrong here? What is the rule to include or not include an HTML tag in the CSS descendant selector?

Many thanks for any help!

3 Answers

Fabrice Triboix
Fabrice Triboix
6,858 Points
Fabrice Triboix
Fabrice Triboix
6,858 Points

Hi All,

Thank you all for your responses. The syntacic errors were not the gist of my question. I did a little error when testing out my stuff, and actually

header div ul li {  }

does work.

So my mistake, sorry the annoyance and the silly question!

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Fabrice,

You have a colon after your li's li: which is causing your selector not to work. You would only use a colon with pseudo classes and elements like :hover, :visited, ::after, ::before and so on.

So header div ul li would work but it's not necessary to be that specific. As Adam Moore noted, it's not necessary to list every single element on the way to the one you are targeting. That could make for some pretty long selectors on a real project.

Also, as Adam pointed out, don't rely on the browser to close your tags for you.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Jason, I definitely didn't know that about the browser. Thanks!

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Well, first of all, your list items are not closed with </li> tags.

When referencing nested items, it isn't necessary to list each step down the line to get to a specific item; you only really need to list what is necessary to get to the place you need. In your example, header div li is specific enough to get to the li's that you are looking for, without having to specify that they are in the "ul".

So, it basically goes like this: search in header for some div. It finds all elements inside of header that match the selector div, EVERY one of them. Then, if you tell it to look for li selectors inside of the div, it will target EVERY li element inside of all divs. Since it is such a short bit of code, being more specific isn't necessary. If there is only one header, one div, and one ul with li tags in it, then even something as short as header li { } would select what you needed (actually, just saying li { } would suffice, but maybe not necessarily for a specific code challenge in the lessons here). The idea is to write as little code as possible to do the best job possible, and listing each child under each parent usually isn't necessary.

Hope this helps!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Adam,

You might like to know that browsers process selectors from right to left. The rightmost selector is called the key selector and is the element you are targeting.

So if the selector was header li the browser would get all the li elements on the page and then for each one it would travel up the dom to see which ones have an ancestor header element.

It's ok for us to still think of them left to right but knowing how the browser does it can help us write more efficient selectors.