Pseudoclase nth-child
La pseudoclase nth-child selecciona un elemento,
que es el enésimo hijo de su padre.
Sintaxis
selector:nth-child(número | odd | even | expresión) {
}
Valores
| Valor | Descripción |
|---|---|
| número |
Un número positivo comenzando desde 1.
Especifica el número del elemento al que queremos
aplicar el estilo. La numeración de los elementos comienza desde 1.
|
odd |
Elementos impares. |
even |
Elementos pares. |
| expresión |
Se pueden componer expresiones especiales con la letra n,
que representa todos los números enteros desde cero (no desde uno)
hasta infinito. Así, 2n significa todos los números pares
(comenzando desde el segundo).
¿Cómo entenderlo? Sustituimos en n secuencialmente
números desde 0 y así sucesivamente: si n = 0, entonces 2n dará 0 -
no existe tal elemento (la numeración de elementos es desde 1),
si n = 1, entonces 2n dará 2 - el segundo elemento, si n = 2,
2n da 4 - el cuarto elemento. Si escribimos 3n - será
cada tercer elemento (comenzando desde el tercero), y así sucesivamente.
|
Ejemplo
En este ejemplo, haremos de color rojo
aquel li que es el 4-to hijo
de su padre:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Ejemplo
Ahora haremos rojos todos los li pares:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Ejemplo
Ahora haremos rojos todos los li impares:
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Ejemplo
Ahora haremos roja cada tercera
li (comenzando desde la tercera):
<ul>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Ejemplo
En el selector se puede especificar un rango de elementos.
Supongamos que tienes una lista de 20
elementos y necesitas seleccionar los elementos del 7
al 14 inclusive. Esto se puede hacer
así:
<ol>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
<li>elemento de lista</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
