Join James Williamson for an in-depth discussion in this video Targeting multiple instances, part of CSS: Selectors.
- The real power of the nth-child selector…is its ability to target multiple elements…based on repeating patterns.…To understand how that works,…we're gonna have to explore the pattern matching formula…and how its values work.…So to explore that syntax I'm gonna be using…the patterns.htm file.…Now I'm gonna scroll down just a little bit…to go down here into the syntax.…And you can see that I have two syntax examples.…The first one, we target every second item,…nth-child, and in the parentheses is passed a 2n.…
Now below that, we have another example…that says nth-child(2n+4),…which would match every second item…starting with the fourth item.…Now the first time you see this,…it can be a little bit confusing,…so I want to explain to you…how the pattern matching formula works.…To do that, I'm gonna scroll back up here…to the summary text that I have…where I kind of go over the formula a little bit,…because I think I've got some examples here…that can explain this a little bit better.…So the formula itself is basically (an+b).…
- 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?
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.