Grow your CSS skills. Land your dream job.

General sibling

Last updated on:

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

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

Comments

  1. Permalink to comment#

    im little difficult to understand this trick,

  2. JoeShmoe
    Permalink to comment#

    “still would select spans that are defendants descendants of whatever”

  3. Rohit
    Permalink to comment#

    Give an example to understand this trick…

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".