css3 nth del tipo restringido a la clase [duplicado]

Esta pregunta ya tiene una respuesta aquí:

¿Hay alguna manera de limitar css3 nth-of-type a una clase? Tengo un número dinámico de elementos section con diferentes clases que designan sus necesidades de diseño. Me gustaría agarrar cada 3rd .module, pero parece que nth-of-type busca el tipo de elemento classes y luego calcula el tipo. En su lugar me gustaría limitarlo a solo .module s.

Gracias!

JSFiddle para demostrar: 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

Desafortunadamente, no hay manera (al menos ninguna que yo sepa) de seleccionar nth-of-type de una clase, ya que nth-of-class no existe. Probablemente tendrá que agregar una nueva clase a cada tres .module manualmente.

 62
Author: Oskar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-07 12:58:26

Parece que lo que realmente quieres es el css4 :nth-match selector, pero no es realmente compatible en la mayoría de los navegadores todavía, por lo que actualmente, la única manera de hacerlo es con javascript

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

Http://jsfiddle.net/w3af16dj/

 32
Author: Eduardo Wada,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-11 12:17:52