Selectionner 3 elements tous les 4 elements :nth-child

Bonjour, comme mon titre l'indique, je veux sélectionner 3 éléments tous les 4 éléments

<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>

Je voudrais donc les 4,5,6,10,11,12...

Est-ce possible de le faire en un seul nth-child au lieu de faire

:nth-child(4n) :nth-child(4n+2) :nth-child(4n+3)

?
Modifié par dqniel (03 Dec 2013 - 17:15)

a froid je vois 2 solutions:
1) faire un reset tout les div:nth-child(4n)
2) ne pas styler les div:not(:nth-child(4n)) mais les autres oui

<edit> test : http://codepen.io/anon/pen/CGxtq
Modifié par gc-nomade (03 Dec 2013 - 18:29)

Salut,

Si le résultat attendu est de sélectionner 4, 5, 6, 10, 11, 12, 16, 17, 18, et ainsi de suite, vu que la série comporte à chaque fois un rang multiple de 6, pour les calculs, il est plus simple de partir de la divisibilité par 6, pour ainsi dire.

Malheureusement, il est impossible de sélectionner les éléments souhaités avec un seul sélecteur. Par conséquent, je ne vois pas de solution plus simple que la combinaison de sélecteurs suivante :

div:nth-child(6n), div:nth-child(6n-1), div:nth-child(6n-2) {
  /* Ici, les règles CSS qui s'appliquent */
}

oups, apparement , j'ai lu trop vite ,
j'ajouterais que d’utiliser Sass ou similaire pourrait être aussi utile plutôt pour produire du code répétitif.
Coté serveur , il peut aussi être aisée de distribué une class.
++

gc-nomade a écrit :
j'ajouterais que d’utiliser Sass ou similaire pourrait être aussi utile plutôt pour produire du code répétitif.

Cela dit, il y a pire en matière de répétition du code. De toute façon, avec Sass ou tout autre préprocesseur CSS, on n'obtiendra pas mieux que ça :

div {
  &:nth-child(6n), &:nth-child(6n-1), &:nth-child(6n-2) {
    /* Ici, les règles CSS qui s'appliquent */
  }
}

gc-nomade a écrit :
Coté serveur , il peut aussi être aisée de distribué une class.

Si la compatibilité avec IE 8 et versions antérieures est primordiale, oui ; sinon, c'est superflu.

Bonsoir,

pour sass , j'avais plutôy imaginer quelque chose comme ça : http://codepen.io/anon/pen/qevdb , réutilisable et modifiable à volonté. (plutôt une fonction de base).

Pour le coté serveur, c'etait exactement ça l'idée (vielle methode pour vieux machin)