Como su nombre lo indica, le permite construir una expresión aritmética usando la variable además de los números constantes. Puede realizar la suma ( ), la resta ( ) y la multiplicación de coeficientes ( donde es un número entero, incluidos números positivos, números negativos y cero).:nth-child()
n
+
-
an
a
Así es como reescribiría la lista de selección anterior:
div:nth-child(4n)
Para obtener una explicación sobre cómo funcionan estas expresiones aritméticas, consulte mi respuesta a esta pregunta , así como la especificación .
Tenga en cuenta que esta respuesta supone que todos los elementos secundarios de un mismo elemento padre son del mismo tipo de elemento, div
. Si tiene otros elementos de diferentes tipos, como h1
o p
, deberá usarlos en :nth-of-type()
lugar de :nth-child()
para asegurarse de contar solo div
elementos:
<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 enésimo hijo que coincide con un selector arbitrario, no podrá hacer esto con un selector 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 n
variable, comienza a contar en 0. Esto es lo que coincidiría con cada selector:
: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 los anteriores. En este caso, no hay diferencia.