CSS 3 nth of type restricted to class
css, css-selectors, pseudo-class
Solution
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.
Problem
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 `.module`s. 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; } ```