CSS: subsequent sibling selector (~)

Subsequent-Sibling Combinator

tag1 ~ tag2

match element x if:

• tag2 matches x.
• x has a older sibling y (y comes before x), tag1 matches y.

(think of it as match all tag2 that has a older brother tag1.)

tag can be a simple selector or compound selector.

/* make list items red, except first */
li ~ li {
 color: red;
}

<ul>
 <li>cat</li>
 <li>dog (match)</li>
 <li>bird (match)</li>
</ul>

Example. All paragraphs after a heading

/* all p elements that are siblings of h2 and come after it */
h2 ~ p {
 font-weight: bold;
}