CSS 3 nth of type restricted to class

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

88918 次浏览

小开

最佳答案

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.

小开

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/