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 trialGöran Joelsson
11,710 PointsHow about if I would like to target a <li> which is in a parent called <section>, but where there are several <sections>
I have a specific li
I would like to target, but in the HTML (which I can't edit) there are several parents to these li
's. I would like to target the first parent section
and only the third li
in that that first section
. Is this feasible?
Göran Joelsson
11,710 Points@jasonanello That's exactly what my HTML structure looks like. Thanks!
2 Answers
Michal Broniewicz
6,681 Points[Corrected]* If you are talking about targeting third li element inside of the first section.
How about targeting:
section:nth-of-type(1) li:nth-of-type(3) {
code;
}
To explain - first you are targeting first of type section and then inside of that section you are targeting third li element same way. This will make it.
you can also try nth-child. If your section is first child and in the future you wont add any other element before it its safe to target it, otherwise you will have to change number inside of (). then target
:nth-child (3) {}
Jason Anello
Courses Plus Student 94,610 PointsMichal's answer has been updated. That selector should work out for you.
It could be
section:nth-of-type(1) li:nth-child(3)
The only direct children of a ul
are li
's and script supporting elements so you don't have to worry about there being a mixture of siblings requiring the use of nth-of-type
Dennis Fink
12,060 PointsHey Göran,
I'm not sure whether i really get your problem, but maybe you should check out these videos on css advanced selectors and specificity. They really helped me a lot understanding the nature of css.
https://www.youtube.com/watch?v=fy07HYm-geM https://www.youtube.com/watch?v=oh2JLo2yxCM
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsI have edited the question body to show the missing html tags if anyone wants to revise their answer.
Michal Broniewicz , I think you're pretty close but because of the missing tags you might have misunderstood the html structure.
Göran Joelsson , can you confirm if this example is representative of the html you're working with?
Is there more than one list in that first section?
Do the section elements have other siblings that aren't sections? This will determine whether you can get by with nth-child or if nth-of-type would be required.