Adjacent sibling

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:

<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.

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

Comments

  1. User Avatar
    Do choi phong the
    Permalink to comment#

    Greated! Thanks for shared!

  2. User Avatar
    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. User Avatar
    Jam

    Thanks folks!

  4. User Avatar
    McLeod
    Permalink to comment#

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

  5. User Avatar
    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:

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

    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?

  6. User Avatar
    Mark
    Permalink to comment#

    This is a nice concise description. Thanks.

  7. User Avatar
    surender sharma
    Permalink to comment#

    is there any shortcut method to avoid so many + sign if i want to style 10th element with adjacent-sibling ? i don’t want to use nth-child
    for ex:- .container > li + li + li + li + li{}

    • User Avatar
      Avaroth
      Permalink to comment#

      How about :nth-of-type instead of nth-child? His way you will only select the, for example 5th li element, no matter how many other elements are in this .container element.

  8. User Avatar
    surender sharma
    Permalink to comment#
  9. User Avatar
    Rob Y
    Permalink to comment#

    I noticed that the following does not work. Any thoughts or workarounds?

    .body-class .p + .body-class img {
       color: white;
    }
    
    • User Avatar
      TK
      Permalink to comment#

      I’ve got the same problem.

      I would like to style the child element of a sibling.
      Have you found an answer yet?

    • User Avatar
      WilliC
      Permalink to comment#

      Is it not working because you are selecting the class .p instead of the element p?

      .body-class p + .body-class img {
         color: white;
      }
      
    • User Avatar
      Rob Y
      Permalink to comment#

      Hey WilliC,

      That was a typo, but it still doesn’t work. I think it’s looking for a direct sibling, so the following does not work:

      .body-class p + .body-class img {
          property: value
      }
      

      but the following does:

      .body-class p + img {
          property: value
      }
      
    • User Avatar
      Rob Y
      Permalink to comment#

      TK, I think this will target a span child of a div sibling to .body-class p:

      .body-class p + div span {
          property: value;
      }
      

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-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag