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 trialFabrice Triboix
6,858 PointsCSS: 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
6,858 PointsHi 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
Courses Plus Student 94,610 PointsHi 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
21,956 PointsJason, I definitely didn't know that about the browser. Thanks!
Adam Moore
21,956 PointsWell, 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
Courses Plus Student 94,610 PointsHi 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.