Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel