css3类型限制为类

Question

有没有办法将css3限制nth-of-type为一个类？我有一些动态数量的section元素,不同的类指定了它们的布局需求.我想抓住每一个第三.module,但它似乎nth-of-type查找类元素类型,然后计算类型.相反,我想将它限制为只有.modules.

谢谢!

JSFiddle演示: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

不幸的是,没有办法(至少我不知道)选择nth-of-type一个类,因为nth-of-class不存在.您可能需要.module手动为每三个人添加一个新类.

Answer 2

看起来你真正想要的是css4:nth-​​match选择器,但它在大多数浏览器中并不真正支持,所以目前,唯一的方法就是使用javascript

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

http://jsfiddle.net/w3af16dj/