Next Sibling Selector

It is also called as the adjacent sibling combinator. It applies style to an element’s next sibling or to the another element if it matches the second part of the selector. Its syntax is of the form  E1 + E2, where E2 is the subject of the selector.
The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.
Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:
       math + p { text-indent: 0 }
Next example reduces the vertical space separating an H1 and an H2 that immediately follows it:
       h1 + h2 { margin-top: -5mm }
The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class=”opener”:
       h1.opener + h2 { margin-top: -5mm }
It is also illustrated as
Next Sibling Selector
Share this post
[social_warfare]
Direct Child Selectors
Attribute Selectors

Get industry recognized certification – Contact us

keyboard_arrow_up