Join James Williamson for an in-depth discussion in this video Combining selectors, part of CSS: Selectors.
- One of the really interesting things about…pseudo-class selectors is that you can chain them together…to create more complex selectors.…This is especially helpful with the structural…pseudo-class selectors that we've been exploring…because it allows us to be more precise…with exactly the elements that we're targeting.…And to show you what I'm talking about here…I wanna show you the syntax examples…that I have on the combine.htm file.…Our first example here is an h4 followed by a :last-child…followed by :first-of-type, so essentially…it's looking for both of these pseudo-class selectors.…
So it's a way of saying, sort of and.…So when an h4 is the last child and it's…the first of its type, go ahead and match that,…and that allows us to be a lot more specific.…The example below that, a.current:first-child:hover.…So that's gonna say any link with a class of current…that is the first child that is also currently being…hovered over, you're gonna style a certain way.…So in addition to the structural pseudo-class selectors…
- 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.