CSS Neighbor Sibling Selector

The adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element.

Select adjacent Brothers

If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector (adjacent sibling selector).

For example, if you want to increase the top margin of a paragraph that appears immediately after the H1 element, you can write:

H1 + P {margin-top:50px;}

This selector reads: "Select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element."

Try it yourself.

Grammatical explanations

The adjacent sibling selector uses the plus sign (+), which is the adjacent sibling (adjacent sibling combinator).

Note: As with a sub-binding, there can be white space next to the adjacent sibling binding character.

Take a look at the following document tree fragment:

<div>  <ul>    <li>list Item 1</li>    <li>list item 2</li>    <li >list Item 3</li>  </ul>  <ol>    <li>list item 1</li>    <li>list Item 2</li>    <li>list item 3</li>  </ol></div>

In the above fragment, the DIV element contains two lists: An unordered list, an ordered list, each containing three list items. These two lists are adjacent brothers, and the list item itself is also an adjacent sibling. However, the list items in the first list and the list items in the second list are not adjacent siblings because the two sets of list items do not belong to the same parent element (up to the cousin).

Keep in mind that you can only select the second element in two adjacent siblings with a single binding character. Please see the selector below:

Li + li {font-weight:bold;}

The above selector only changes the second and third list items in the list to bold. The first list item is not affected.

Try it yourself.

Combined with other selectors

Adjacent sibling combinations can also be combined with other binding characters:

HTML > Body table + ul {margin-top:20px;}

This selector is interpreted as: Select all sibling ul elements that appear immediately after the table element, which is contained within a BODY element, and the body element itself is a child of the HTML element.

CSS Neighbor Sibling Selector