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:

<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>
								

ul ~ p{
	font-weight: 900;
}
								

The following demonstrates the above sample: