The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Adjacent sibling

Last updated on:

The adjacent sibling combinator in CSS isn't a selector on its 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:

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

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

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.

See the Pen Adjacent Sibling Selector by Sara Cope (@saracope) on CodePen.

More Resources

Browser Support

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


  1. Do choi phong the
    Permalink to comment#

    Greated! Thanks for shared!

  2. hanzla
    Permalink to comment#

    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

  3. Jam

    Thanks folks!

  4. McLeod
    Permalink to comment#

    The clearest definition of this I’ve found. Thanks!

  5. Peter Müller
    Permalink to comment#

    The explanation is clear, but I find it hard to come up with good every-day examples for using the + combinator in real-life CSS ;-)

    The above example illustrates its point, but for captions I would use a figure-element surrounding the img and a figcaption-element:

      <img src="..." alt=" "> 
      <figcaption>caption for image</figcaption> 

    That way you can easily style the caption without an adjacent sibling selector. Does any one have real-world examples für the adjacent + combinator?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed