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 defendants of whatever .featured-image ~ p matches.

The spec for selectors level 4 calls these “Following Sibling Combinators”.

Browser Support