css selectores - Selecciona cada elemento Nth en CSS




2 Answers

Como su nombre lo indica : n th-child() permite construir una expresión aritmética usando la variable n además de los números constantes. Puede realizar la suma ( + ), la resta ( - ) y la multiplicación de coeficientes (donde a es un entero, incluidos números positivos, números negativos y cero).

Así es como reescribirías la lista del selector anterior:

div:nth-child(4n)

Para obtener una explicación sobre cómo funcionan estas expresiones aritméticas, vea mi respuesta a esta pregunta , así como la spec .

Tenga en cuenta que esta respuesta asume que todos los elementos secundarios dentro del mismo elemento principal son del mismo tipo de elemento, div . Si tiene otros elementos de diferentes tipos, como h1 o p , necesitará usar :nth-of-type() lugar de :nth-child() para asegurarse de que solo cuenta los elementos 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>

Para todo lo demás (clases, atributos o cualquier combinación de estos), donde está buscando el n º hijo que coincide con un selector arbitrario, no podrá hacer esto con un selector de CSS puro. Vea mi respuesta a esta pregunta .

Por cierto, no hay mucha diferencia entre 4n y 4n + 4 con respecto a :nth-child() . Si usa la variable n , comienza a contar a 0. Esto es lo que cada selector coincidiría:

: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
...

Como puede ver, ambos selectores coincidirán con los mismos elementos que arriba. En este caso, no hay diferencia.

selectors nth-of-type

¿Es posible seleccionar, digamos, cada cuarto elemento en un conjunto de elementos?

Ej: tengo 16 elementos <div> ... podría escribir algo así.

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

¿Hay una mejor manera de hacer esto?




Prueba esto

div:nth-child(4n+4)



Related