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?

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag