The general sibling selector (~) selects all elements that are next siblings of a specified element. Indeed, this operator is one of the most technical ways of selecting elements in CSS, however it is very useful and makes our lives easier whenever we want to target multiple elements that either share the same parent or are the next siblings to the specified element.

For instance:

In the above example, we can see that “h2” element has three siblings, selecting the first instance (i,e h2 ~ h2 will style only the other siblings.) But when you select the parent as the first instance (i,e div ~ h2, the next siblings will only be styled). See the illustration below;