85

Is there a way to limit CSS 3's nth-of-type to a class? I've got a dynamic number of section elements with different classes designating their layout needs. I'd like to grab every third .module, but it seems that nth-of-type looks up classes element type and then calculates the type. Instead I'd like to limit it to only .modules.

JSFiddle to demonstrate: http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

<section class="featured video">
    <h1>VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (6)</h1>
</section>

​CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}​
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
technopeasant
  • 7,809
  • 31
  • 91
  • 149

2 Answers2

81

Unfortunately, there isn't any way (at least none I know of) to select nth-of-type of a class, since nth-of-class doesn’t exist. You will probably have to add a new class to every third .module manually.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
r0skar
  • 8,338
  • 14
  • 50
  • 69
  • 2
    There cannot be a way to select `:nth-of-type()` of a class, because `:nth-of-type()` only selects the nth child of its **type**. Also see http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name – BoltClock Jun 21 '12 at 11:04
  • 3
    The behaviour of nth-of-type is so unexpected. .thing:nth-of-type(1) is actually div.thing:nth-of-type(1) so if you don't include the element in your selectors it's confusing. If you don't think this is unexpected then why does it cause so much confusion amongst developers? – creamcheese Jul 07 '13 at 10:01
  • 7
    @Dominic Watson: I think the problem here is that most authors aren't familiar with the term "element type", which is used by Selectors in place of the HTML/XML-specific term "tag name". That's clarified a little bit in Selectors level 4, but not by very much. – BoltClock Jul 31 '13 at 21:05
  • 1
    That's quite sad and unintuitive in my humble opinion. Should be nth entity of matching selector, not just a tag name. CSS limitation, unfortunetely. – Robo Robok Oct 04 '20 at 15:42
43

It seems what you really want is the css4 :nth-match selector, but it's not really supported in most browsers yet, so currently, the only way to do it is with JavaScript:

$(".featured.module").filter(function(index, element){
    return index % 3 == 2;
}).addClass("third");

http://jsfiddle.net/w3af16dj/

Eduardo Wada
  • 2,606
  • 19
  • 31
  • 2
    Why do you pass the `element` as an argument to the function? It's not used – bg17aw Aug 06 '16 at 15:45
  • 8
    because I think it's useful reference for SO readers, when I wrote this answer I had to check the documentation to remember which argument came first. I also assume some people will modify the code. – Eduardo Wada Mar 24 '17 at 10:00
  • 1
    No idea who would downvote this, provides a current answer and a (still) future-answer. To save anyone the effort if you consider it, `nth-match` still isn't supported in Chrome in 2017. No need to check the other browsers for me. – Regular Jo Oct 27 '17 at 17:26
  • Still useful near the end of 2017 - I wanted to replace li:class:nth-match(4n+1) and I changed the function above to return index % 4 == 0; Thanks for the fiddle, so I could play around and get it right! – Jason Nov 20 '17 at 15:21
  • @RegularJoe guess it was downvoted because element and index are in swapped order as one usually is used to.. but it works :D – shidizzle Jun 18 '20 at 05:02
  • I hope they get rid of `nth-of-type()` eventually, because it makes things unobvious. If I wanted nth entity of given tag name, I could do `div:nth-match-selector(3)`, for example. – Robo Robok Oct 04 '20 at 15:44