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

Comments

  1. User Avatar
    selvy
    Permalink to comment#

    im little difficult to understand this trick,

  2. User Avatar
    JoeShmoe
    Permalink to comment#

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

  3. User Avatar
    Rohit
    Permalink to comment#

    Give an example to understand this trick…

  4. User Avatar
    blackhat
    Permalink to comment#

    For those whom didn’t understand this selector, try this example:

    • User Avatar
      John Smith
      Permalink to comment#

      You nailed it. Clean and concise. 10/10
      Gold star. Pat on the back.

  5. User Avatar
    Matthew Lymer
    Permalink to comment#

    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.

    <div>
        <span class="a"></span>
        <span class="b"></span>
        <span class="a"></span>
        <span class="a"></span>
    </div>
    

    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.

  6. User Avatar
    Mihaly
    Permalink to comment#

    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.

    • User Avatar
      Ralph
      Permalink to comment#

      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.

  7. User Avatar
    John
    Permalink to comment#

    Agreed. I had the same issue. Any idea when this can be fixed?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag