Mediante las pseudo-clases de CSS2 podemos acceder a un elemento XHTML a partir de atributos que no aparecen en nuestro marcado, ni pueden deducirse de la estructura del documento, a excepción de first-child.

Si, como lo oyes, una pseudo-clase no esta representada en nuestro código XHTML en forma alguna, entre otras cosas por que son dinámicas. Esto quiere decir que una pseudo-clase determinada apuntará a un elemento solo en algunos momentos. Ahora si, ahora no.

Por ejemplo, si queremos incluir un enlace en nuestra página, escribimos algo asi:

Si observamos nuestro código, veremos que no aparece niguna referencia al estado del enlace, es decir, no podemos saber a priori, si ya ha sido visitado, o si alguien ha pasado el puntero del ratón sobre el.

También podemos decir, que una pseudo-clase apuntará o no a un elemento dependiendo de como interactue el usuario con nuestra página.

Existen siete pseudo-clases en CSS, pero en este artículo nos centraremos solo en la primera de ellas.

La pseudo-clase :first-child

first-child es la única pseudo-clase que se puede inferir de la estructura del documento. Funciona si el elemento en cuestión es el primer hijo de otro elemento.

Veamos como funciona con pequeño ejemplo:

el marcado:

el estilo:

Si usais un navegador compatible con los estandares, podreis ver como los párrafos uno y dos se colorean de rojo. El primer párrafo es el primer hijo de la etiqueta body y el segundo lo es de la etiqueta div.

Si lo que deseamos es seleccionar, por ejemplo, solo los párrafos que sean primeros hijos de una capa div, podríamos usar una regla como esta:

Llegados a este punto es importante saber que CSS no considera las cajas anónimas como elementos de pleno derecho, así que simplemente las ignora.

Con este código XHTML y la regla CSS anterior se sigue coloreando el párrafo 2.

Problemas con IE

Otra vez malas noticias. IE, al menos en las versiones que he testeado hace caso omiso de esta pseudo-clase. Y por lo que he leido por ahí, la versión 7 de nuestro navegador favorito tampoco esta por la labor...

No se por que me sorprendo.