Grow your CSS skills. Land your dream job.

Adjacent sibling

Last updated on:

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+ ? ?

Comments

  1. Greated! Thanks for shared!

  2. Hey man thnx for porviding so much things but i need your help you disable comments under php chat i want ask you about php voice chat i want to make a chat room having voice chat along with it can you help me thnx alot :)
    i hope you will reply

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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