Join James Williamson for an in-depth discussion in this video Introducing nth-child selectors, part of CSS: Selectors.
- In this chapter, I want to introduce,…nth-child selectors, which allow us to…match elements based on repeating patterns.…It makes this selector ideal for styling list items,…table rows, or other types of repeating content.…There are four nth-child selectors.…There's nth-child, nth-of-type,…nth-last-child, and nth-last-of-type.…We'll start exploring the nth-child selectors…by becoming familiar with the basic syntax of it.…So I'm gonna scroll down a little bit,…in the, nth-child.htm file,…found here in the 06_01 directory.…
And let's just take a look at the basic syntax.…Now, there's a pattern matching…formula that you can pass into…the nth-child selector, but we'll cover that later.…Right now, I just want to focus…on the very basics of the syntax.…One of the first things that we can do with it,…is just match a single ordinal,…meaning a single item within the pattern.…So, in this case, we have nth-child, and then…in parentheses, we're passing the number four.…That would select the fourth repeating…element that you're targeting.…
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Basic Selectors
2. Attribute Selectors
3. User Action Pseudo-Class Selectors
4. Structural Selectors
6. Matching Patterns
7. Writing Efficient 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.