Style the First Occurence of a Class

Question

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.

Denys Séguret · Accepted Answer · 2014-01-19T08:57:53.307

8

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

the first child (and thus the first of its class in the parent) or
following another element whose class isn't dairy

Demonstration

Documentation of :not

Notes :

those selectors aren't available on IE8 (but not a lot of the modern web is, Google even stopped support of IE9 in GMail...).
if you wanted to apply the same kind of rule but with possible intermediate elements, you'd use ~ instead of +

edited Jan 19 '14 at 08:57

answered Jan 19 '14 at 08:12

Denys Séguret

372,613
87
782
758

can you explain :not ? – Francisco Corrales Morales Jan 19 '14 at 08:14
1

what does the plus sign does in css ? – Francisco Corrales Morales Jan 19 '14 at 08:16
@FranciscoCorrales sibling – Royi Namir Jan 19 '14 at 08:18
2

@FranciscoCorrales I added the documentation of the plus sign. – Denys Séguret Jan 19 '14 at 08:18
Thank you. But that looks weird, to apply to all, and then all-first... Can't it be done with one instruction ? – Francisco Corrales Morales Jan 19 '14 at 08:20
4

Can the downvoter explain what he didn't like ? – Denys Séguret Jan 19 '14 at 08:21
1

@FranciscoCorrales I found a "one instruction" solution :) – Denys Séguret Jan 19 '14 at 08:25
@dystroy ie9+....(regarding not) – Royi Namir Jan 19 '14 at 08:26
shouldn't that be `~` instead of `+`? – Mr_Green Jan 19 '14 at 08:27
@Mr_Green ~ is siblings which also is not immediately after . which isnt helpful in this case – Royi Namir Jan 19 '14 at 08:28
@Mr_Green Depends on the goal, in fact. I'll add a notice about that. – Denys Séguret Jan 19 '14 at 08:29
@dystroy I was wondering why `inherit` and not `auto` ( though your solution does work) – Royi Namir Jan 19 '14 at 08:29
@downvoter , again , comments are helpful – Royi Namir Jan 19 '14 at 08:30
@RoyiNamir Once again it depends on the goal, but I supposed there could be a style defined in the enclosing element and OP didn't want to change it. – Denys Séguret Jan 19 '14 at 08:31
I don't understand the :not – Francisco Corrales Morales Jan 19 '14 at 08:53
@FranciscoCorrales I added an explanation of the selector using `:not` and a link to a documentation. – Denys Séguret Jan 19 '14 at 08:58

score 2 · Answer 2 · answered Jan 19 '14 at 08:13

2

You can try this : (jq solution)

$(".meat:eq(0),.dairy:eq(0)").css('color','red');

enter image description here

answered Jan 19 '14 at 08:13

Royi Namir

144,742
138
468
792

2

downvotes explnation would be great. – Royi Namir Jan 19 '14 at 08:15
1

"preferably pure CSS". This is a CSS question. I don't get why people want to replace a simple, fast CSS selector(s) with a overweight JS lib. – bjb568 Jan 19 '14 at 08:15
1

@bjb568 "but jQuery would also do." – Royi Namir Jan 19 '14 at 08:16
But jQuery wouldn't do as fast or clean. – bjb568 Jan 19 '14 at 08:16
1

That's not your problem. he is the OP and that's what he asked. – Royi Namir Jan 19 '14 at 08:17
1

can you make this a CSS ? – Francisco Corrales Morales Jan 19 '14 at 08:18
It's an answer, that's why I'm not flagging it. It's not a good one, so that's why I voted down. Don't tell the OP to use bad practices, even it if it does answer his question. – bjb568 Jan 19 '14 at 08:18
2

You win I dont want to argue. – Royi Namir Jan 19 '14 at 08:19
@bjb568, it's a valid answer don't see the reason to downvote. – Sergio Jan 19 '14 at 08:21
But it's bad. Isn't it good->upvote bad->downvote terrible->flag? – bjb568 Jan 19 '14 at 08:25
1

@FranciscoCorrales Original Poster. – Royi Namir Jan 19 '14 at 09:01
why do you say it's a bad practice? @bjb568 – Francisco Corrales Morales Jan 19 '14 at 09:02
I find your answer acceptable, can you provide a JSFiddle working ? – Francisco Corrales Morales Jan 19 '14 at 09:02
1

@FranciscoCorrales http://jsbin.com/onUyIwEK/3/edit – Royi Namir Jan 19 '14 at 09:03
Well I find your solution pretty simple, and easy to understand and edit... – Francisco Corrales Morales Jan 19 '14 at 09:07
@FranciscoCorrales I told you. "\"preferably pure CSS\". This is a CSS question. I don't get why people want to replace a simple, fast CSS selector(s) with a overweight JS lib. – bjb568 8 hours ago" – bjb568 Jan 19 '14 at 16:38

Style the First Occurence of a Class

2 Answers2