Join James Williamson for an in-depth discussion in this video Targeting adjacent siblings, part of CSS: Selectors.
- View Offline
- Exercise Files
- Occasionally, you'll want to be more precise…when targeting elements by their sibling relationships.…In those cases, the adjacent sibling selector…allows you to match elements that are immediately…preceded by another element type…and as you can see, the syntax is very similar…to the combinators that we've been using before.…This time, however, we're using a "+" symbol…instead of something like a ">" symbol,…so in the syntax example here that you're seeing…in the direct-sibling.htm file, you can see…the first example I have is "h1 + p".…
So the "+" symbol is that adjacent sibling combinator.…So what this means is that any paragraph…immediately preceded by a heading one,…meaning there's no other elements…or content between them in the same parent.…So adjacent siblings basically,…immediate siblings.…Now you can combine these with…other things like descendent selectors,…you can see the syntax example below that…is "article h1 + h2"…that would target any heading two…that was immediately preceded by a heading one…who had a common ancestor of article.…
- 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.