tricks - css3 nth de tipo restringido a la clase
nth-of-type class (2)
Esta pregunta ya tiene una respuesta aquí:
¿Hay alguna forma de limitar el nth-of-type css3 a una clase? Tengo una cantidad dinámica de elementos de section con diferentes clases que designan sus necesidades de diseño. Me gustaría obtener cada 3er .module , pero parece que nth-of-type busca el tipo de elemento de clases y luego calcula el tipo. En cambio, me gustaría limitarlo solo a .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;
}
Desafortunadamente, no hay forma (al menos ninguno que yo sepa) de seleccionar nth-of-type de una clase, ya que no existe la nth-of-class . Es probable que deba agregar una nueva clase a cada tercer .module manualmente.
Parece que lo que realmente quieres es el selector css4: n-match , pero en realidad no es compatible con la mayoría de los navegadores, por lo que actualmente, la única forma de hacerlo es con javascript.
$(".featured.module").filter(function(index, element){
return index % 3 == 2;
}).addClass("third");