Join James Williamson for an in-depth discussion in this video Targeting sibling elements, part of CSS: Selectors.
- Most of the element relationships we've targeted…up till now, have dealt with parent to child relationships.…The general sibling combinator…lets us target elements based on their relationships…as siblings.…This can be a little bit harder to grasp right at first,…so let's take a look at the syntax…and kind of what it allows us to target.…I'm in the general-sibling.htm file.…I just wanna go over the syntax here really briefly.…You can see the first example I have says,…h1 and then a tilde character, and then a p.…
So, what that does,…again, it's a lot like the child combinators…and the descendant selectors…in that it's targeting relationships.…But in this case, it's saying,…the targeted element, which in this case is a paragraph,…is preceded by an h1 that is also a sibling.…Meaning they're found within the same parent.…So, it lets you be really specific.…Now, the important part to remember about this…is that not only are they siblings,…meaning they're in the same parent,…but one precedes the other.…That's what often gets lost when people…
- 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.