Join James Williamson for an in-depth discussion in this video Targeting children by type, part of CSS: Selectors.
- In the last exercise we explored…the first, last, and only pseudo class selectors.…While those are certainly useful,…there are going to be times when you want…to match the occurences of child elements…strictly by the element type itself.…So to do that,…we're gonna use the first-of-type,…last-of-type, and only-of-type.…So those are incredibly similar…to the last, first, and only child selectors.…But in this case instead of matching the literal…first, last, or only child,…they matched based upon the type of element…that you're targeting.…
So if you do a select or elect p first-of-type,…you're gonna match the first paragraph inside of a parent…regardless of how many other elements…that might proceed it, so that is extremely useful.…From a syntax standpoint,…they are very similar.…You can see these are just pseudo class selectors.…So we have the colon in front of them…and we have first-of-type,…last-of-type, and only-of-type.…So to experiment with those I've created…a little example section down here…that's a little bit more complex…
- 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.