nth-of-type select the first 3 elements with a specific class

Question

How can I select the first three or four items with the class .class-b

<div class="wrapper">
  <div class="class-a">xxx</div>
  <div class="class-a">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-c">xxx</div>
  <div class="class-c">xxx</div>
  <div class="class-c">xxx</div>
</div>

The amount of divs will vary.

The is no nth-of class selector so ..not possible. JQuery would be your answer. — Paulie_D, May 21 '14 at 14:44
Have a look at this http://www.sitepoint.com/jquery-select-items-specific-class/ — Khushal Dave, May 21 '14 at 14:46
See http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class?rq=1 — j08691, May 21 '14 at 14:47
If the *order* of these elements will not vary you *could* abuse sibling selectors, but the more elements you need the more verbose your selector will be. — BoltClock, May 21 '14 at 14:49
So for example you might have .class-a + .class-b + .class-a + .class-b (where such a selector would then break spectacularly)? — BoltClock, May 21 '14 at 14:54
@BoltClock - I always thought examples like the fiddle the OP posted shouldn't work with nth-of-type based on a class, but it seems to be working. What am I missing? — j08691, May 21 '14 at 15:00
@j08691: They are the nth elements of their type, which is div. In this case, since they're all divs, it's functionally equivalent to :nth-child(). The class selector just limits matches to elements of that particular class, rather than directly affect how :nth-of-type() counts elements. — BoltClock, May 21 '14 at 15:02
@BoltClock - Ah so it's the order of the example that's throwing me off. If they weren't in order it wouldn't work as expected. — j08691, May 21 '14 at 15:05

web-tiki · Answer 1 · 2014-05-21T15:47:30.367

4

nth-of-type targets the type tag (div, span, a...) and it can't target nth elements that has a specific class. You can read more about this selector on MDN.

If your elements don't always have the same order as in your example, you will need JS :

JS solution :

Here is a quick jQuery snippet that selects the 3 first elements with the class .class-b and adds the .selected class to them. You can then use it to style targeted elements.

DEMO

jQuery :

var child_num = 0;
$('.wrapper > .class-b').each(function(){
    if(child_num < 3){
        $(this).addClass('selected');
    }
    child_num++;
});

CSS :

.selected{
    background:gold;
}

edited May 21 '14 at 15:47

answered May 21 '14 at 14:44

web-tiki

99,765
32
217
249

1

Thx, but jQuery is no option – user3661304 May 21 '14 at 16:38
@user3661304 well as the order and number of elements can change, `nth-of-type()` won't work for you and I don't think you will find a CSS solution. How are you generating the layout? couldn't you assign a specific class to the targeted elements during the layout generation? – web-tiki May 21 '14 at 17:48
No, im not generating the layout so it has to be flexible. But there is definitly no way to do this :-( – user3661304 May 21 '14 at 18:12

score 3 · Answer 2 · answered May 21 '14 at 15:05

3

This can be done with only CSS, however, it relies on the elements staying as groups of siblings otherwise it may not work as expected.

.class-a + .class-b

will select only the first, then use

.class-a + .class-b + .class-b

for the second, and so on..

I made a jsFiddle Demo: http://jsfiddle.net/KpLMR/

answered May 21 '14 at 15:05

Bill

3,478
23
42

Yes, basically what I said in the comments. The only catch is that it assumes the elements are in the exact order given. But if it works for the OP, it's an answer. – BoltClock May 21 '14 at 15:06
I was just reading your comments after posting this. It's a good point and I will put it in the answer. When he said that the order *does change* he gave an example which the order hadn't changed so that kinda confused me.. – Bill May 21 '14 at 15:07
Yeah... you're not the only one. Not sure if he just misunderstood my comment. – BoltClock May 21 '14 at 15:12
unfortunetly this is not working for me. I have to use just one selector to do this. – user3661304 May 21 '14 at 16:39

nth-of-type select the first 3 elements with a specific class

2 Answers2