Adjacenct sibling selector

Adjacent sibling selector

The adjacent sibling selector is used to find two (or more) elements that are of the same level within their parent.

An element is adjacent to another if they can be considered as siblings.

The adjacent sibling selector is the + symbol.

The adjacency selector works by combining two (or more) elements and then applying the CSS to the last element.

HTML

<ul>
	<li>List element</li>
	<li>List element</li>
</ul>
<p>
	Hello world 1
</p>
<p>
	Hello world 2
</p>
<p>
	Hello world 3
</p>

CSS

ul + p{
	font-weight: 900;
}

The following demonstrates the above sample:

Hello world 1

Hello world 2

Hello world 3

Did you know my courses are all printer-friendly? This means you can easily export them to PDF or print them for later use.