To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

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: 100;
}
								

The following demonstrates the above sample:

  • List element
  • List element

Hello world 1

Hello world 2

Hello world 3

Provide feedback on this page
Comments are sent via email to me.