CSS permite utilizar pseudoclases avanzadas para seleccionar elementos dependiendo de su estructura o posición, llegando a contabilizarlos.

Existen varias pseudoclases que permiten hacer referencias a los elementos del documento HTML según su posición y estructura de los elementos hijos. A continuación muestro un pequeño resumen de estas pseudoclases:

Pseudoclase Descripción
:first-child Primer elemento hijo (de cualquier tipo).
:last-child Último elemento hijo (de cualquier tipo).
:nth-child(n) N-elemento hijo (de cualquier tipo).
:nth-last-child(n) N-elemento hijo (de cualquier tipo) partiendo desde el final.

Para ello, volvamos a utilizar una estructura en forma de árbol para ver cómodamente la ubicación de cada uno de los elementos.

Las dos primeras pseudoclases, :first-child y :last-child hacen referencia a los primeros y últimos elementos (al mismo nivel) respectivamente.

strong:first-child {
  background-color:cyan;
}

strong:last-child {
  background-color:green;
}

Primero o último elemento

Sin embargo, si no queremos quedarnos en los primeros o últimos elementos y necesitamos más potencia para elegir, podemos hacer uso de la pseudoclase :nth-child(A), que permite especificar el elemento deseado, simplemente estableciendo su número en el parámetro A:

Número Equivalente a la pseudoclase Significado
strong:nth-child(1) strong:first-child {} Primer elemento hijo, que además es un <strong>
strong:nth-child(2) Segundo elemento hijo, que además es un <strong>
strong:nth-child(3) Tercer elemento hijo, que además es un <strong>
strong:nth-child(n) Todos los elementos hijos que son <strong>
strong:nth-child(2n) Todos los elementos hijos pares <strong>
strong:nth-child(2n-1) Todos los elementos hijos impares <strong>

Truco: En la página NTH-Test puedes comprobar los valores de la tabla anterior de un modo más visual y práctico, estableciendo el valor de A y observando los resultados.

Veamos además un ejemplo gráfico:

Hijo número N

Como se aprecia en el ejemplo, en el caso :nth-child(2) se puede ver como el segundo elemento lo ocupa un elemento span, por lo que sólo se selecciona el elemento strong del segundo caso, donde si existe.

Elementos del mismo tipo

En los casos anteriores, seleccionamos elementos independientemente de que elemento sea. Simplemente, hacemos caso a la posición donde está ubicado. Si queremos hacer referencia sólo a elementos del mismo tipo, utilizaremos los selectores siguientes, análogos a los anteriores, pero haciendo referencia sólo a elementos del mismo tipo:

Pseudoclase Descripción
:first-of-type Primer elemento hijo (de su mismo tipo).
:last-of-type Último elemento hijo (de su mismo tipo).
:nth-of-type(n) N-elemento hijo (de su mismo tipo).
:nth-last-of-type(n) N-elemento hijo (de su mismo tipo) partiendo desde el final.

Las pseudoclases :first-of-type y :last-of-type son las equivalentes a :first-child y :last-child pero sólo teniendo en cuenta elementos del mismo tipo. Por otro lado, la pseudoclase :nth-of-type(A) es la equivalente a :nth-child(A) y :nth-last-of-type(A) es la equivalente a :nth-last-child(A). Veamos un ejemplo sobre el ejercicio anterior:

Hijo número N

En este ejemplo, se puede ver como :nth-of-type(2) selecciona el segundo elemento strong en ambos casos, a pesar de que en el primero ocupa la tercera posición. En este caso se selecciona porque es el segundo elemento de su mismo tipo (<strong>).

Por otro lado, :nth-last-of-type(A) hace una selección de forma inversa, empezando por el último elemento.

Hijos únicos

Existen también varias pseudoclases para la gestión de hijos únicos. Son las siguientes:

Pseudoclase Descripción
:only-child Elemento que es hijo único (de cualquier tipo).
:only-of-type Elemento que es hijo único (de su mismo tipo).
:empty Elemento vacío (sin hijos, ni texto).

La propiedad :only-child nos proporciona un método para aplicar estilo a aquellos elementos que sean el único hijo de su elemento padre. Además, como ha ocurrido anteriormente, también existe la pseudoclase :only-of-type que es equivalente al anterior pero sólo para elementos del mismo tipo, es decir, que puede ser que no sea el único elemento hijo, pero sí el único de su tipo.

Muy relacionada está también la pseudoclase :empty, que permite seleccionar los elementos vacíos que no contengan absolutamente nada (o espacios o etiquetas de comentarios HTML).

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).