Join James Williamson for an in-depth discussion in this video Grouping selectors, part of CSS: Selectors.
- View Offline
- Exercise Files
- Occasionally, you'll have several elements…that share the same styling.…Rather than writing multiple rules…that contain the same formatting over and over again,…you can just group selectors together…in a way that allows you to use one rule…to style multiple elements.…It's really simple to do.…So I have the grouping.htm file…from 01_07 opened up in a browser.…And I'm just gonna scroll down to the syntax…so that you guys can see how selectors are grouped together…and get a better feel for how they work.…All you have to do to group selectors together…is to create a comma-separated list.…
In the syntax example, you can see here…we have an h1, followed by an h2,…followed by an h3,…followed by a class selector for warning,…followed by a descendant selector,…that targets any em inside of a div.…So you can string together…any kind of selectors that you want;…descendant selectors, class selectors,…attribute selectors, pseudo-class selectors,…it does not matter.…And you can string as many of them together as you want.…The order that they come in doesn't matter,…
- 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.