Chad Chad - 3 months ago 16
CSS Question

CSS sibling selectors (select all siblings)

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
.

Answer

You can select all the following siblings using CSS3's ~ instead of + (which is in CSS2):

.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 containers:

div > h2:not(.open)
Comments