CSS Almanac

Home » CSS Almanac » Selectors » A » Adjacent sibling

Adjacent sibling

The adjacent sibling combinator in CSS isn't a selector on it's own, but a way of combining two selectors. For example:

p + p {
  margin: 0;
}

The plus sign (+) is the adjacent sibling combinator, between two paragraph tag (element) selectors. What this means is "select any paragraph tag that is directly after another paragraph tag (with nothing in between)". Here's some examples of what it would select:

<div>
  <p>I'm a paragraph</p>
  <p>I get selected!</p>
</div>

<div>
  <p>I'm a paragraph</p>
  <h2>Monkey hair</h2>
  <p>I will NOT get selected</p>
</div>

This is mostly useful for when using semantic markup and needing to adjust for certain scenarios in which elements are directly next to each other.

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any 7+ ? ?

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~