Unidad 9. Avanzado: Más pseudoclases

Más pseudoclases

- nth-child(n)

Podemos crear selectores que se apliquen al elemento que ocupa una determinada posición entre las etiquetas hijas de una etiqueta padre.

Un selector de este tipo se escribe con :nth-child(n) detrás de la etiqueta sobre la que se aplica, siendo n el número de la posición. Por ejemplo, la siguiente regla:

li:nth-child(3) { color: red  }

Indica que la tercera etiqueta li de una serie de etiquetas li tomará el color rojo. Para este fragmento de página:

<ul>
   <li>línea uno</li>
   <li>línea dos</li>
   <li>línea tres</li>
   <li>línea cuatro</li>
   <li>línea cinco</li>
   <li>línea seis</li>
   <li>línea siete</li>
   <li>línea ocho</li>       
 </ul>

Produce el siguiente resultado, donde vemos que la tercera etiqueta li se ve de color rojo.

Podemos modificar el valor de n para obtener números pares (2n), impares (2n+1), múltiplos de 3 (3n), etc. Por ejemplo, la siguiente regla muestra las filas pares de una tabla de un color de fondo y las impares de otro color de fondo:

tr:nth-child(2n+1) {
    background-color: antiquewhite
}
tr:nth-child(2n) {
    background-color: aliceblue
}

Al aplicarlo para este fragmento de página:

<table>
        <tr><td>línea uno</td></tr>
        <tr><td>línea dos</td></tr>
        <tr><td>línea tres</td></tr>
        <tr><td>línea cuatro</td></tr>
        <tr><td>línea cinco</td></tr>
        <tr><td>línea seis</td></tr>
        <tr><td>línea siete</td></tr>
        <tr><td>línea ocho</td></tr>       
   </table>

Produce el siguiente resultado, donde vemos que las filas pares e impares tienen distinto color de fondo

También se puede usar el valor :nth-child(even) para las impares y :nth-child(odd) para las pares, así como :first-child para el primer elemento y :last-child para el último.