web-dev-qa-db-fra.com

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

Est-il possible de sélectionner, par exemple, chaque quatrième élément d'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?

csscss3css-selectors
229
Derek Adair

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

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 le spec .

Notez que cette réponse suppose que tous les éléments enfants d'un 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 h1 ou p, vous devrez utiliser :nth-of-type() à la place de :nth-child() pour vous assurer de ne compter que les éléments div:

<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), où 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 .

À propos, il n'y a pas beaucoup de différence entre 4n et 4n + 4 en ce qui concerne :nth-child(). Si vous utilisez la variable n, elle commence à compter à 0. Voici à quoi correspond 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 constater, les deux sélecteurs correspondent aux mêmes éléments que ci-dessus. Dans ce cas, il n'y a pas de différence.

403
BoltClock
div:nth-child(4n+4)

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

24
Tomalak

Essayez ceci

div:nth-child(4n+4)
12
Marko

Vous avez besoin du bon argument pour la pseudo-classe nth-child .

  • L’argument doit être de la forme _an + b_ pour correspondre à tous lesth enfant à partir de b.

  • a et b sont des nombres entiers facultatifs et peuvent être nuls ou négatifs.

    • Si a est égal à zéro, il n'y a pas "tous lesth child " clause.
    • Si a est négatif, la correspondance est effectuée à partir de b.
    • Si b est égal à zéro ou négatif, il est possible d'écrire une expression équivalente en utilisant positif b par ex. _4n+0_ est identique à _4n+4_. De même, _4n-1_ est 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>_

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

_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>_

Sélectionnez tous les 3ème et 4ème enfants des groupes de 4 (3 et 4, 7 et 8, 11 et 12, ...)

_/* 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>_

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

_/* 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>_
9
Salman A