Styliser chaque 3ème élément d'une liste à l'aide de CSS?
Est-il possible pour moi d'appeler chaque 3ème élément de la liste?
Actuellement dans mon 960px wide div J'ai une liste de boîtes flottantes à gauche et affichées dans une vue en grille 3x3. Ils ont aussi un droit de marge de 30px, mais parce que les 3ème 6ème et 9ème éléments de la liste ont cette marge, ils les font sauter d'une ligne à une autre, ce qui rend la grille mal affichée
Comment est-il facile de faire en sorte que les 3e, 6e et 9e ne disposent pas de la marge de droite sans devoir leur donner une classe différente, ou est-ce la seule façon de le faire?
Oui, vous pouvez utiliser ce qu'on appelle les sélecteurs :nth-child .
Dans ce cas, vous utiliseriez:
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 ce problème, utilisez :nth-child() parmi d'autres sélecteurs de pseudo-classes/attributs dans IE6 à IE8, voir ce lien .
Vous pouvez utiliser le :nth-child sélecteur pour cela
li:nth-child(3n) {
/* your rules here */
}
:nth-child est la réponse que vous recherchez.