Existen una colección de pseudo clases muy interesantes en CSS 3, que nos permiten seleccionar elementos por la ubicación que ocupan en el documento, o en una parte del mismo. De esta forma, podemos, por ejemplo, tener una página con una gran cantidad de elementos del mismo tipo (párrafos, por ejemplo), y seleccionar los pares o impares, o los que ocupen determinada posición con relación a sus respectivos contenedores, etc.

En este artículo vamos a conocer como usar todos estos selectores de forma eficiente para conseguir el diseño que deseemos en cada caso.

LAS PSEUDO CLASES :first-child Y :last-child

Estas pseudo clases seleccionan los elementos que ocupan, respectivamente, el primero y el último puesto, dentro de su contenedor padre, si son del tipo indicado junto a la pseudo clase. Dicho así suena bastante críptico, así que lo veremos con un ejemplo. Mira el siguiente HTML:

Como ves, hay tres contenedores div. Cada uno de ellos es contenedor padre de distintos párrafos (elementos p) y, en algunos casos, de otros elementos que no son de tipo p (en el ejemplo, los que hemos definido como etiquetas span). A su vez, el body es el contenedor padre de los elementos div. Fíjate que hemos numerado los párrafos, para poder identificarlos con facilidad cuando ejecutemos la página en el navegador. Ahora veamos el CSS:

Vemos que actuamos sobre dos pseudo clases aplicadas a los elementos p. La pseudo clase :first-child establece un color verde y la pseudo clase :last-child establece un color rojo.

La pseudo clase :first-child se refiere al primer elemento dentro de un contendor padre, si este es del tipo indicado (en este caso, p). Por lo tanto, en el primer contendor div afectará al primer elemento, ya que es el primero que hay dentro del contenedor, y es de tipo p. En el segundo contenedor div afectará también al primer elemento, ya que es el primero en este contenedor, y es de tipo p. Sin embargo, en el tercer contendor div no afectará a ningún elemento, ya que el primer descendiente del div no es p, sino span, y el primer p que hay dentro de este tercer div no es el primer descendiente.

Con la pseudo clase :last-child ocurre lo mismo, pero refiriéndonos al último elemento, en lugar de al primero. Por lo tanto, vemos que, en el primer contenedor div, se afecta al último párrafo, ya que es de tipo p (cómo hemos definido en la hoja de estilos) y es el último descendiente del contenedor. Lo mismo ocurre con el tercer contenedor div: el último descendiente es del tipo p referido en la hoja de estilos, por lo que también se ve afectado por las reglas CSS correspondientes. Sin embargo, en el segundo contenedor div el último descendiente no es del tipo p, por lo que ningún hijo de este contenedor se ve afectado por estas reglas.

A la derecha vemos el aspecto del documento, con los párrafos correctos afectados.

Estas pseudo clases pueden emplearse, directamente, como selectores en jQuery. Por lo tanto, podríamos obtener el mismo resultado sin hoja de estilos externa, con el siguiente código:

En las líneas resaltadas puedes ver claramente cómo hemos hecho esto. Observa que el resultado es el mismo que antes, pero sin haber enlazado ninguna hoja de estilos.

LAS PSEUDO CLASES :first-of-type Y :last-of-type

Estas son similares a las que acabamos de ver, con un diferencia sutil. La pseudo clase :first-of-type se refiere al primer elemento que encuentra del tipo especificado, dentro de su contenedor padre, aunque no sea el primer descendiente de dicho padre. La pseudo clase :last-of-type se refiere al último elemento que sea del tipo especificado, dentro del contenedor padre, aunque no sea el último descendiente de dicho contenedor.

Para aclararnos, suponte el mismo HTML que en el primer ejemplo (el que no tienen jQuery), pero con la siguiente hoja de estilos enlazada:

Esto aplicará las reglas que establecen el color verde al primer elemento p de cada contenedor, aunque no sea el primer descendiente de dicho contenedor. Por lo tanto, pondrá en verde los párrafos 1-1, 2-1 y 3-1. Las reglas que establecen el color rojo se aplican al último elemento p de cada contenedor, aunque no sea el último elemento descendiente del mismo, por lo que se pondrán en rojo los párrafos 1-4, 2-4 y 3-4.

Estas pseudo clases también pueden ser empleadas como selectores en jQuery, cómo ves a continuación:

LAS PSEUDO CLASES :nth-child(n) Y :nth-last-child(n)

La pseudo clase :nth-child(n) afecta al elemento del tipo referenciado que ocupa el lugar n dentro de su contenedor. Si el elemento n no es del tipo referenciado, no lo afecta. Observa el siguiente HTML:

Ahora mira la hoja de estilos CSS:

Hemos creado una regla que afecta a los párrafos que sean segundo elemento de su contenedor (por el argumento 2 de la pseudo clase). Mira el HTML. Fíjate que en el primer contenedor div el segundo elemento no es un párrafo. Hay párrafos, sí, pero ninguno es el segundo hijo del contenedor. Por lo tanto, ningún elemento de este contendor se verá de color verde. En cambio, en los otros dos contenedores div, el segundo descendiente si es un párrafo. Por lo tanto, los párrafos 2-2 y 3-2 sí se verán afectados.

Con :nth-last-child(n) pasa lo mismo, sólo que empezando a contar los elementos desde el último de cada contenedor. Suponte que al HTML que acabamos de ver le enlazamos la siguiente hoja de estilos:

Contamos los descendientes de cada contenedor, empezando por el final. En el prier contenedor, el segundo elemento por el final es un párrafo (el 1-3), por lo que se verá afectado. Lo mismo ocurre con el tercer contenedor. Sin embargo, en el segudo contenedor, el segundo elemento por el final no es un párrafo. Hay otros párrafos, pero no ocupan esa posición. Por lo tanto, en el segundo contenedor, ningún elemento se verá afectado por las reglas CSS establecidas.

Estas pseudo clases también pueden ser usadas como selectores directamente en jQuery. Observa el siguiente listado:

Fíjate en las líneas resaltadas, y pruébalo para ver su comportamiento.

LAS PSEUDO CLASES :nth-of-type(n) Y :nth-last-of-type(n)

Estas son similares a las anteriores, pero se refieren al elemento n especificado dentro de su contenedor, aunque no sea el hijo n. Aclarémonos: Con el HTML del ejemplo anterior (el que no emplea jQuery), vamos a asociar la siguiente hoja de estilos:

La regla p:nth-of-type(2) se refiere al segundo descendiente de tipo p de cada contenedor, aunque no sea el segundo hijo de dicho contenedor. Lo vemos claro en el caso concreto del primer contenedor. El segundo hijo es un elemento span. No obstante, el segundo párrafo (que es el tercer hijo del contenedor) se ve afectado.

Con la regla p:nth-last-of-type(2) ocurre lo mismo, sólo que empezando a contar los hijos de cada contenedor desde el último, no desde el primero.

Estas dos pseudo clases también pueden ser usadas como selectores en jQuery, como ves a continución:

USO AVANZADO DE :nth-of-type Y :nth-last-of-type

Hemos visto que las últimas dos pseudo clases reciben un argumento numérico, para apuntar a un elemento concreto. Sin embargo, pueden darnos mucho más juego, cambiando ese argumento por otro más específico. Por ejemplo, podemos usar la pseudo clase :nth-of-type(odd) para referirnos a todos los elementos impares, contando desde el primero que hay en el contenedor, o :nth-last-of-type(odd) para referirnos a todos los elementos impares que hay en el contenedor, empezando a contar por el último. Si en lugar de odd, el argumento es even, apuntaremos, en cada caso, a los elementos pares. Como siempre, unos ejemplos nos aclaran esto. Observa el siguiente HTML:

Como ves, tenemos ocho elementos div. Estos, a su vez, están dentro de un contenedor, que es el elemento body. Además, dicho elemento, está dentro de un contenedor que es el elemento html. Como puedes ver, aunque a primera vista no lo parezca, siempre existe una jerarquía en los documentos HTML. Ahora observa el siguiente CSS:

Como ves, lo que hacemos es que los elementos div impares contando desde el principio (div:nth-of-type(odd)), se pongan verdes, mientras que los elementos pares contando desde el principio (div:nth-of-type(even)) se ponen rojos.

Si, en lugar de :nth-of-type empleamos :nth-last-of-type, vemos como se cambian las reglas CSS, ya que, al haber un número par de elementos (ocho elementos div), los pares contando desde el principio son los impares, contando desde el final.

Esto, que nos viene estupendo cuando, por ejemplo, tenemos que tener una colección de elementos con un aspecto alterno para visualización, digamos, de datos tabulares, puede hacerse también desde jQuery:

Y todavía le podemos sacar más partido a estas pseudo clases. Imagina que tenemos una colección de elementos (similar a las que estamos viendo), y queremos aplicar una regla CSS a uno de cada cuatro elementos. Es decir, se la aplicaremos al cuarto, al octavo, y así, sucesivamente. Observa el siguiente HTML:

Cómo ves, tenemos 30 elementos div. Ahora observa la hoja de estilos:

Si lo que queremos es aplicar la regla CSS a uno de cada cuatro elementos, el argumento de la pseudo clase obecede a la siguiente fórmula: an + b, donde los valores son los siguientes:

• a. Se refiere a cada cuantos elementos debemos seleccionar. Para seleccionar uno de cada cuatro, este valor es 4.
• n. Como ves, se pone directamente la letra n, como una constante.  Actúa como separador, pero solo puedes usar la n.
• b. Es el elemento a partir del cual se empieza a seleccionar. Si pones, como en el ejemplo, 0, se cuentan los tres primeros y luego se selecciona el cuarto, y así sucesivamente. Si, por ejemplo, ponemos 6, este será el primer elemento que se selecciona, y de ahí en adelante, cada 4.

Este uso del selector también puede aplicarse contando desde el final de la colección de elementos, y también puede usarse desde jQuery.

LA PSEUDO CLASE :only-of-type

Esta pseudo clase se refiere a un elemento cuando es el único de ese tipo que hay en su contenedor padre. Veámoslo con un ejemplo. Observa el siguiente HTML:

Como ves, hay dos contenedores div que tienen un solo elemento p, mientras que el resto de los contenedores tienen más de uno. Observa el CSS:

Este selector afecta a los elementos especificados que son el único de ese tipo dentro del contenedor correspondiente. En este ejemplo, por lo tanto, afecta a los párrafos 1-1 y 3-1. Este selector también puede ser referenciado desde jQuery, como ves a continuación:

LA PSEUDO CLASE :only-child

Este selector es similar al anterior, aunque más restrictivo. Sólo aplica la regla CSS al elemento seleccionado, si es el único hijo de su contenedor padre. En el HTML anterior (el que no tiene jQuery) podemos cargar la siguiente hoja de estilos:

Como ves si cargas la página, ahora sólo se ve afectado el párrafo 1-1, ya que en el tercer contenedor, aunque sólo hay un elemento p, no es el único descendiente, ya que también hay un elemento span.

Por supuesto, este selector, como todas las demás pseudo clases de este artículo, puede ser referenciado directamente desde jQuery.

RESUMEN

PSEUDO CLASES DE UBICACIÓN
SELECTOR	COMENTARIOS
:first-child	Selecciona el elemento referenciado que es el primero del tipo o clase especificado dentro de su contenedor padre.
:last-child	Selecciona el elemento referenciado que es el último del tipo o clase especificado dentro de su contenedor padre.
:first-of-type	Selecciona el elemento referenciado si es el primero del tipo o clase especificado dentro de su contenedor padre.
:last-of-type	Selecciona el elemento referenciado si es el último del tipo o clase especificado dentro de su contenedor padre.
:nth-child(n)	Selecciona el elemento que es el hijo n, si es del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-last-child(n)	Selecciona el elemento que es el hijo n, si es  del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-of-type(n)	Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-of-type(odd/even)	Selecciona los elementos impares (odd) o pares (even), de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre.
:nth-of-type(an + b)	Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b, por el principio del contenedor padre.
:nth-last-of-type(n)	Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-last-of-type(odd/even)	Selecciona los elementos impares (odd) o pares (even), de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre.
:nth-last-of-type(an + b)	Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b, por el final del contenedor padre.
:only-of-type	Selecciona aquellos elementos del tipo o clase referenciado que sean el único de ese tipo o clase dentro de su contenedor padre.
:only-child	Selecciona aquellos elementos del tipo o clase referenciado que sean el único higo dentro de su contenedor padre.