selectors - selector de hijos css
Selecciona cada elemento Nth en CSS (4)
¿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?
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.
Necesitas el argumento correcto para la pseudo clase nth-child .
El argumento debe tener la forma de
an + bpara que coincida con cada uno de los niños a partir de b.Tanto
acomobson enteros opcionales y ambos pueden ser cero o negativos.- Si
aes cero, entonces no hay una cláusula de "cada niño" . - Si
aes negativo, el emparejamiento se realiza al revés comenzando desdeb. - Si
bes cero o negativo, entonces es posible escribir una expresión equivalente usandobpositiva,bejemplo,4n+0es igual que4n+4. Del mismo modo,4n-1es igual que4n+3.
- Si
Ejemplos:
Seleccione cada 4to niño (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>
Seleccione cada 4to hijo a 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>
Seleccione cada 3ro y 4to niño de grupos de 4 (3 y 4, 7 y 8, 11 y 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>
Seleccione los primeros 4 artículos (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>
Prueba esto
div:nth-child(4n+4)
div:nth-child(4n+4)