The CSS nth pseudo-classes select elements that are a specific child or group of children, or the specific element or group of elements of a specific type. In this video, learn how to use nth-child, nth-of-type, nth-last-child, and nth-last-of-type, including how to select even and odd items, a single specific item, or every specific item starting at a given point.
- [Instructor] In the last two videos, … you've learned to select the first, last or only child, … and the first, last or only of a type. … I'm sure you're shocked, shocked, … to know that you can also select any other item you wish. … For example, you want every third item? … Every fifth item, starting with the second? … These can all be coded with the nth selectors, … including nth-child, nth-of-type, … nth-last-child and nth-last-of-type. … Let's just focus on nth-child for the moment, … because once you understand … how one of these nth selectors work, … you'll pretty quickly get them all. … First of all, an nth-child selector must take an argument … to describe what number n is equal to. … Let's start with the easy one, which is with key words. … So, if I simply say li:nth-child even, just like that, … and say color: orange. … What I will get is the even numbered list items … will wind up being orange. … And fortunately, even is defined in human terms, … so it is in fact numbers two, four and six, …
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Best practices for CSS
- The impact of CSS selectors on performance
Skill Level Beginner
The power of selectors1m 8s
1. Review of Basic CSS
2. Combinator Selectors
3. Attribute Selectors
Simple attribute selectors2m 47s
4. Pseudo-Classes, Pseudo-Elements, and the Universal Selector
5. Choosing Selectors
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.