web-dev-qa-db-fra.com

css3 nième de type restreint à la classe

Est-il possible de limiter nth-of-type De css3 à une classe? J'ai un nombre dynamique d'éléments section avec différentes classes désignant leurs besoins en matière de présentation. J'aimerais saisir chaque 3e .module, Mais il semble que nth-of-type Recherche le type d'élément de classes puis calcule le type. Au lieu de cela, j'aimerais le limiter à seulement .module S.

Merci!

JSFiddle fera une démonstration: 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;
  }​
csscss3css-selectorspseudo-class
68
technopeasant

Malheureusement, il n'y a aucun moyen (du moins aucun que je sache) de sélectionner nth-of-type d'une classe, puisque nth-of-class n'existe pas. Vous devrez probablement ajouter une nouvelle classe à chaque troisième .module manuellement.

67
r0skar

Il semble que ce que vous voulez vraiment, c’est css4: sélecteur de correspondance identique , mais il n’est pas encore vraiment pris en charge par la plupart des navigateurs.

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

http://jsfiddle.net/w3af16dj/

36
Eduardo Wada