Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 4.4General sibling selector

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

Feedback 👍
Comments are sent via email to me.