CSS sibling selectors (select all siblings) [duplicate]

Usually, I'm good with CSS, but I can't seem to figure this one out. If I have a structure of

<div>
    <h2 class="open">1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

how can I target all of the sibling h2s using the .open class with CSS? My main issue is that sibling selectors (.open + h2) will only target the h2 immediately following .open.

Solution 1:

You can select all the following siblings using ~ instead of +:

.open ~ h2

If you need to select all h2 elements that aren't .open whether they precede or follow .open, there is no sibling combinator for that. You'll need to use :not() instead:

h2:not(.open)

Optionally with a child combinator if you need to limit the selection to div parents:

div > h2:not(.open)

Solution 2:

I know this isn't a direct answer to your question, but I've found it to be a much more efficient way to select siblings by simply selecting all the children of the parent, and specifying a unique class for the open as you have it there. So the code would be:

div h2 { } // apply the style for all "siblings" but really children
div h2.open { } // apply the style or cancel styles from the siblings

This works great for me and it doesn't require new css rules or anything special.