CSS3 nth do tipo restrito à classe [duplicado]
Esta pergunta já tem uma resposta:
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;
}
62
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");
32
Author: Eduardo Wada, 2015-11-11 12:17:52