The general sibling combinator (~) in CSS looks like this in use:
.featured-image ~ p {
font-size: 90%;
}In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of “featured-image”) and making them of slightly smaller font-size.
This selects elements at the same hierarchy level. In this example .featured-image and the p elements are at the same hierarchy. If the selector continued past the p or before .featured-image, the normal rules apply. So .featured-image ~ p span still would select spans that are descendents of whatever .featured-image ~ p matches.
The spec for selectors level 4 calls these “Following Sibling Combinators”.
Demo
Here’s another example that highlights all of the p elements that follow an img:
img ~ p {
background-color: #FEF0B6;
padding: 5px;
}Which will result in the following:
Quirks
WebKit used to have a quirk where you couldn’t use these with pseudo selectors. Like:
input:checked ~ div {
/* Wouldn't work */
}I don’t know the exact versions of browsers where this was fixed in, but it is fixed now.
More Information
- Child and Sibling Selectors
- Similar to the Adjacent Sibling Combinator.
- MDN Docs
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | 3+ | 1+ | 9+ | 7+ | Any | Any |
im little difficult to understand this trick,
“still would select spans that are defendants descendants of whatever”
Give an example to understand this trick…
For those whom didn’t understand this selector, try this example:
You nailed it. Clean and concise. 10/10
Gold star. Pat on the back.
If people still don’t understand, a “sibling” element (b) of another element (a) is such that is comes (b) comes after (a) and has the dame direct parent as (a), i.e.
In the above, the selector .b ~ .a selects all .a such that .a comes after a .b and shares the same direct parent of .a – so only the last 2 .a element would be selected in this example.
Just a note.
The WebKit quirk is back on Chrome in iOS9 where you can’t use general sibling combinator with pseudo selectors. Hopefully they fix it soon.
I find Chrome on iOS behaves weird in a lot of things. Getting stuff right in Chrome on iOS compared to Chrome on Android is a huge difference.
Agreed. I had the same issue. Any idea when this can be fixed?