Sélectionnez chaque Nième élément en CSS

242

Est-il possible de sélectionner, disons, un élément sur quatre dans un ensemble d'éléments?

Ex: J'ai 16 <div>éléments ... Je pourrais écrire quelque chose comme.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

Y a-t-il une meilleure manière de faire cela?

css css-selectors

— Derek Adair
source

1

J'espère que tout le monde est toujours en vie, juste pour les débutants et pas si débutants, sélectionnez même une quantité tous les n éléments et des choses plus délicates: nthmaster.com

— gengns

419

Comme son nom l'indique, vous permet de construire une expression arithmétique en utilisant la variable en plus des nombres constants. Vous pouvez effectuer l'addition ( ), la soustraction ( ) et la multiplication des coefficients ( où est un entier, y compris des nombres positifs, des nombres négatifs et zéro).:nth-child()n+-ana

Voici comment réécrire la liste de sélecteurs ci-dessus:

div:nth-child(4n)

Pour une explication sur le fonctionnement de ces expressions arithmétiques, voir ma réponse à cette question , ainsi que la spécification .

Notez que cette réponse suppose que tous les éléments de l' enfant dans le même élément parent sont du même type d'élément, div. Si vous avez d'autres éléments de types différents tels que h1ou p, vous devrez utiliser :nth-of-type()au lieu de :nth-child()pour vous assurer de ne compter que les divéléments:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

Pour tout le reste (classes, attributs ou toute combinaison de ceux-ci), lorsque vous recherchez le nième enfant qui correspond à un sélecteur arbitraire, vous ne pourrez pas le faire avec un sélecteur CSS pur. Voir ma réponse à cette question .

Soit dit en passant, il n'y a pas beaucoup de différence entre 4n et 4n + 4 en ce qui concerne :nth-child(). Si vous utilisez la nvariable, elle commence à compter à 0. Voici à quoi correspondrait chaque sélecteur:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Comme vous pouvez le voir, les deux sélecteurs correspondront aux mêmes éléments que ci-dessus. Dans ce cas, il n'y a aucune différence.

— BoltClock
source

J'ai juste pensé que j'ajouterais, si vous faites quelque chose comme seulement le quatrième alors vous auriez besoin de quelque chose comme tr td:nth-child(4). Notez l'absence de n entre parenthèses

— WORMSS

2

veuillez noter: cela ne fonctionne que sur les sélecteurs d'éléments (div, td, img, etc.), pas sur le sélecteur de classe comme

— .this

1

J'ai créé une démo interactive pour expliquer visuellement le fonctionnement de nth-child (n): xengravity.com/demo/nth-child . J'ai trouvé que la spécification w3 était particulièrement intimidante pour les débutants sur la syntaxe autorisée; en particulier leur section «scanner lexical».

— xengravity

1

@xengravity: Merci pour le partage! Je suis d'accord, la grammaire n'est pas adaptée aux débutants car elle a été écrite avec des implémenteurs à l'esprit et non des auteurs. La spécification fournit un certain nombre d'exemples sur la façon d'écrire la syntaxe, mais sans visuels d'accompagnement.

— BoltClock

1

J'ai créé un outil similaire pour jouer avec les expressions n-enfant: salman-w.googlecode.com/svn/trunk/css/…

— Salman A

24

div:nth-child(4n+4)

Voir: http://css-tricks.com/how-nth-child-works/

— Tomalak
source

12

Essaye ça

div:nth-child(4n+4)

— Marko
source

10

Vous avez besoin de l'argument correct pour la nth-childpseudo-classe.

L'argument devrait être sous la forme de an + bfaire correspondre tous un ^e enfant à partir de b.
Les deux aet bsont des entiers facultatifs et les deux peuvent être nuls ou négatifs.
- Si aest égal à zéro alors il n'y a pas « tout un ^e enfant » clause.
- Si aest négatif, l'appariement se fait à l'envers à partir de b.
- Si best nul ou négatif, il est possible d'écrire une expression équivalente en utilisant positive, bpar exemple, 4n+0est identique à 4n+4. De même 4n-1est identique à 4n+3.

Exemples:

Sélectionnez tous les 4 enfants (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Développer l'extrait

Sélectionnez tous les 4 enfants à partir de 1 (1, 5, 9, ...)

Afficher l'extrait de code

li:nth-child(4n+1) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Développer l'extrait

Sélectionnez chaque 3ème et 4ème enfant parmi les groupes de 4 (3 et 4, 7 et 8, 11 et 12, ...)

Afficher l'extrait de code

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Développer l'extrait

Sélectionnez les 4 premiers éléments (4, 3, 2, 1)

Afficher l'extrait de code

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Développer l'extrait

— Salman A
source