Skip to main content
Home / CSS Almanac / Selectors / G / General sibling

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".

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:

See the Pen General sibling selector by Robin Rendle (@robinrendle) on CodePen.

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

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1+ 9+ 7+ Any Any
icon-link icon-logo-star icon-search icon-star