Join James Williamson for an in-depth discussion in this video Matching patterns by type, part of CSS: Selectors.
- The power to match repeating patterns of elements…makes the nth-child selector incredibly powerful.…However, this is at times hampered…by the fact that other sibling elements…get counted as part of the pattern as well.…But thankfully, the nth-of-type selector…allows us to match patterns based on element type.…Regardless of the number of other sibling elements…that might be inside the same parent.…So just to kinda show you how that syntax works,…I'm gonna scroll down a little bit here,…inside the matching-types.htm file.…
As you can see, the syntax is almost exactly the same.…The only difference is instead of nth-child,…we have nth-of-type,…so nth-of-type.…Now, how does this differ?…Well, you can see in the first example here,…it would look inside a definition list…and it would find the second term element…regardless of other siblings that might be inside of it.…So regardless of how many definitions you had,…it's only gonna match terms.…In the second example below that,…pnth-of-type(2n + 3),…that would go inside of a parent…
- 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.