I have a stack of divs:
<div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="dairy">Some stuff</div>
<div class="dairy">Some stuff</div>
<div class="dairy">Some stuff</div>
</div>
I need to style the first of each class, and don't have control over the html... preferably pure CSS, but jQuery would also do.
You can try this : (jq solution)
$(".meat:eq(0),.dairy:eq(0)").css('color','red');
Solution 1 : Define a specific style for elements that are not the first one :
.meat {
// applies to all
}
.meat + .meat {
// applies to those that aren't the first one
}
For example, if you want to color in red the first .meat
element, do this :
.meat {
color: red;
}
.meat+.meat{
color: inherit;
}
Documentation about the + pattern :
E + F Matches any F element immediately preceded by a sibling element E.
Solution 2 : Use :not
in combination with +
and first-child
:
.dairy:first-child, :not(.dairy)+.dairy {
color: red;
}
This selector targets any element of class dairy
which is either
dairy
Demonstration
Documentation of :not
Notes :
~
instead of +
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