Css3 nth type limited to class

Question

Is there a way to restrict the css3 nth-of-type class? I have a dynamic number of section elements with different classes denoting their layout needs. I would like to get every third .module , but it seems that nth-of-type looking for the type of the element of the classes, and then evaluating the type. Instead, I would like to limit it to .module s only.

Thank!

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; }​ 

Answer 1

Unfortunately, there is no way (at least I know) to choose nth-of-type for the class, since nth-of-class does not exist. You will probably have to add a new class to every third .module manually.

Answer 2

It seems that you really need css4: the nth-match selector , but it is not supported in most browsers, so this is currently the only way to do this with javascript

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

http://jsfiddle.net/w3af16dj/