CSS3 nth do tipo restrito à classe [duplicado]

Há alguma forma de limitar os css3 a uma classe? Eu tenho um número dinâmico de elementos com diferentes classes designando suas necessidades de layout. Gostava de apanhar a cada 3, mas ... parece que nth-of-type procura o tipo de elemento classes e depois calcula o tipo. Em vez disso, gostaria de O limitar a apenas .module s.

Obrigado!

JSFiddle para demonstrar: 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;
  }​
Author: BoltClock, 2012-06-07
Source

2 answers

Infelizmente, não há nenhuma maneira (pelo menos nenhuma que eu saiba) de selecionar {[[0]} de uma classe, uma vez que nth-of-class não existe. Você provavelmente terá que adicionar uma nova classe A cada três .module manualmente.

 62
Author: Oskar, 2012-06-07 12:58:26

Parece que o que realmente quer é o selector css4 :nth-match , mas ainda não é suportado na maioria dos navegadores, por isso, de momento, a única forma de o fazer é com o javascript 

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

Http://jsfiddle.net/w3af16dj/

 32
Author: Eduardo Wada, 2015-11-11 12:17:52