css3 nth of type restricted to class [duplicate]

问题

This question already has an answer here:

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 6 answers

Is there any way to limit css3\'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 3rd .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.

Thanks!

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

回答1:

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

回答2:

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/

来源：https://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class

标签

css

css3

css-selectors

pseudo-class