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 CSS Selectors Advanced Selectors :nth-child

Posted by Göran Joelsson
Göran Joelsson
11,710 Points

How 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?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I 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?

<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>  <!-- This is what I want to target -->
        <li></li>
        <li></li>
    </ul>
</section>
<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>
<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

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.

Göran Joelsson
Göran Joelsson
11,710 Points

@jasonanello That's exactly what my HTML structure looks like. Thanks!

2 Answers

Michal Broniewicz
Michal Broniewicz
6,681 Points
Michal Broniewicz
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
Jason Anello
Courses Plus Student 94,610 Points

Göran Joelsson ,

Michal'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
Dennis Fink
12,060 Points
Dennis Fink
Dennis Fink
12,060 Points

Hey 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