Menu
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.
277
General Sibling Selector (~) The general sibling selector selects all elements that are next siblings of a specified element.
The ("element ~ siblings") selector selects sibling elements that appear after the specified "element".
To select all sibling elements of an element, we will use siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same parent element in DOM Tree.
2 Answers. Show activity on this post. + will only select the first element that is immediately preceded by the former selector. ~ selector all the sibling preceded by the former selector.
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) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
