~ selector

Back to the index.

Selects elements that are later siblings of other elements.


pre ~ p {color: #CB000F;}

The pre ~ p selector means "each P element that is preceded by a PRE element", but, unlike the pre + p adjacent selector, the <pre> element doesn't have to be the direct preceding element.

Therefore this paragraph, too, should be red. Although it's not directly preceded by a <pre>, the <pre> is a general previous sibling.

This is a paragraph in a div. Since this paragraph doesn't have the <pre> as a previous sibling (it's more like an uncle; a previous sibling of this paragraph's parent node), it shouldn't be red.