General sibling

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