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.

Part 4.4General sibling selector

General sibling selector

The general sibling selector is very similar to the adjacent sibling selector. The main difference between the two is the size of the scope.

The general sibling selector is considered more powerful than the adjacent sibling selector as it's scope is much larger.

This selector is used to select all of the siblings (not just the last one of the statement) of an element.

The general sibling selector is represented by a tilde (˜)

In the same way, all elements must share the same parent for this to activate:

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:

  • List element
  • List element

Hello world 1

Hello world 2

Hello world 3

Code previewClose
Feedback 👍
Comments are sent via email to me.