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 |
Greated! Thanks for shared!
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
Thanks folks!
The clearest definition of this I’ve found. Thanks!
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:
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?
How about this:
h1, h2 { margin: 1em 0 }h1 + h2 { margin-top: -.5em }
Margins for h1 and h2 headings, except for when an h2 appears directly after a h1 (real world use case: you might have section headings for a post, without having an introduction paragraph for the post, and it looks weird having that extra spacing).
servus peter, here is a real example for this: if i have 100 divs, and i want to pick just the very next element of each .something-class. btw, contao rules! ;-)
This is a nice concise description. Thanks.
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{}
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.
I noticed that the following does not work. Any thoughts or workarounds?
I’ve got the same problem.
I would like to style the child element of a sibling.
Have you found an answer yet?
Is it not working because you are selecting the class .p instead of the element p?
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:
but the following does:
TK, I think this will target a
spanchild of adivsibling to.body-class p:@Rob Y
I know this is over a year ago but answering in case others read it.
I think it’s because .body-class p + .body-class img are technically not next adjacent to each other.
This would be correct:
.body-class p + img
You probably don’t have another .body-class directly adjacent to p so I don’t think it’s going to select correctly.