I have following HTML structure:
<div>
<h2>Candy jelly-o jelly beans gummies lollipop</h2>
<p>
Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
</p>
<p>
Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu.
</p>
<h2>Dessert pie cake</h2>
<ul>
<li>liquorice</li>
<li>powder</li>
<li>dessert</li>
</ul>
<h2>Chupa chups sweet dragée</h2>
<p>
Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee.
</p>
</div>
I would like to choose only that h2
which is directly before ul
. How can I do this? In my content there are many more uls
and many more h2s
so the solution should be universal.
As far as I know, CSS doesn't offer any selectors which will target before a selector. Could you select it as an h2
which is directly after a p
(p + h2
)?
h2 {
color: #1a1a1a;
}
p + h2 {
color: #0cc;
}
As you can see, this is probably the best selector you can use if you're relying on CSS, although you could easily just add a class to each h2
that is before a ul
. That would avoid the case where you have a paragraph section before another h2
and paragraph section.
You could do this using jQuery:
.highlight {
color: #0cc;
}
$('ul').prev('h2').addClass('highlight')
This selects every ul
, then selects the h2
that is before it, before finally adding the .highlight
class to it.