Styliser tous les trois éléments d'une liste à l'aide de CSS ?

Question

Est-il possible de donner un style à chaque troisième élément de la liste ?

Actuellement dans mon 960px J'ai une liste de boîtes qui sont flottantes à gauche et qui sont affichées dans une grille 3x3. Elles ont également une marge à droite de 30px mais comme les 3e, 6e et 9e éléments de la liste ont cette marge, ils sautent d'une ligne et la grille s'affiche mal.

Est-il facile de faire en sorte que les 3e, 6e et 9e n'aient pas la marge droite sans devoir leur donner une classe différente, ou est-ce la seule façon de le faire ?

Answer 1

Oui, vous pouvez utiliser ce qui est connu sous le nom de :nth-child sélectionneurs.

Dans ce cas, vous devez utiliser :

li:nth-child(3n) {
// Styling for every third element here.
}

:nième-enfant(3n) :

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-child() est compatible avec Chrome, Firefox et IE9+.

Pour contourner le problème, il faut utiliser :nth-child() parmi d'autres pseudo-classes/sélecteurs d'attributs dans IE6 jusqu'à IE8, voir ce lien .

Answer 2

Vous pouvez utiliser le :nth-child le sélecteur pour cela

li:nth-child(3n) {
 /* your rules here */
}

Answer 3

Essayez ceci

box:nth-child(3n) {  
     ...
}

DEMO

nth-child Support du navigateur

Answer 4

:nth-child est la réponse que vous cherchez.