Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library

:nth-child

8:00 with Guil Hernandez

:nth-child is a powerful structural pseudo-class because it targets child elements based on any position inside a parent.

Quick Reference

Using :nth-child

This targets the even numbered li elements in a parent:

li:nth-child(even) {
  background: blue;
  color: white;
}

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    last child elements, with structural pseudo-classes. 0:00
    Next, we'll see how the nth-child pseudo-class, 0:00
    can target any combination of child elements. 0:03
    Nth-child is a useful and powerful structural pseudo-class, 0:06
    because it can target elements based on any position, within a parent element. 0:09
    And unlike the first and last child pseudo-classes which only target first and 0:13
    last child elements, we can target any child element, or 0:17
    any combination, of child elements. 0:20
    So, we're going to revisit the simple list from the previous stage, 0:23
    to see how we're able to do that. 0:26
    And again, we're not gonna add any class or ID hooks to our elements. 0:28

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up