Entendiendo las pseudo-clases de CSS

En el anterior artículo sobre Selectores de CSS vimos muy por encima las pseudo-clases y los pseudo-elementos. Ambos selectores son grandes armas para dar estilo a nuestros documentos y conseguir buenos resultados con muy poco, por eso ahora es momento de verlos a fondo, aunque hoy únicamente vamos a ver las pseudo-clases.

No pretendo que los veamos todas, pero si al menos las más importantes y más usadas, o al menos las que a mi gusto son las más útiles. Vamos a por ello, y que no se diga que no eres capaz de seguir a un alienígena.

Las pseudo-clases, simplificando, son muy parecidas a un atributo class de HTML, eso sí, sin estar especificadas explícitamente en el marcado. Hay muchas, pero que muchas y a la par también hay un sin fin de formas de clasificarlas. La W3C tiene la suya propia, que puedes ver en el Editor's Draft y que comienzan a partir del apartado dedicado a las pseudoclases-lingüísticas.

En este artículo voy a usar una clasificación diferente, ya que como dije no voy a tocarlas todas, que no recuerdo muy bien donde la vi por primera vez (si lo recordase le pondría un enlace). Para las pseudo-clases que vamos a ver creo que es una clasificación muy acertada y que seguramente te ayudará a comprenderlas mejor.

Pseudo-clases relacionadas con enlaces

Las pseudo-clases :link y :visited fueron introducidas en la primera versión de CSS (también :active que veremos después), pero únicamente para un elemento a. Posteriormente en CSS2 esto cambió para que pudieran aplicarse a cualquier elemento.

Estas pseudo-clases nos permiten seleccionar un elemento en función al estado del enlace, si ha sido o no visitado con anterioridad, y evidentemente depende del historial del navegador en que visualicemos el documento. Su uso es muy sencillo y sólo hay una pega, y es que son mutuamente excluyentes, es decir no podemos combinarlas en un selector:


a:link, a:visited {
    color: blue;
}

a:link:visited {
    color: red;
}

En el ejemplo, el primer caso es totalmente válido, ya que lo que hacemos es dar el mismo estilo a a tanto si ha sido visitado como si no. El segundo caso por contra no es correcto, ya que aunque podemos combinar pseudo-clases para crear selectores más específicos, :link y :visited son mutuamente excluyentes, un enlace no puede estar sin visitar y a la vez haber sido visitado (pura lógica).

Dentro de esta clasificación también tenemos la pseudo-clase :target, que nos permite dar estilo a un elemento cuya id coincide con el identificador de fragmentos de la URL del documento (una URL que ternima con el signo "#" y un identificador). Por ejemplo si tenemos una url www.misitio.com/#inicio el selector que usaríamos sería #inicio:target.

Pseudo-clases dinámicas

Las pseudo-clases dinámicas seleccionan un elemento en función de un estado que ha sido alterado por la acción del usuario. Vamos a ver tres: :hover, :active y :focus, que son las más usadas. Las pseudo-clase :active fue introducida en la primera versión de CSS, al igual que :link y visited, y selecciona un elemento cuando esta ha recibido el foco, bien sea mediante teclado, ratón u otro tipo de entrada.

Las otras dos pseudo-clases, :hover y :active fuero introducidas en CSS2 junto con :lang y :first-child. La pseudo-clase :hover es quizás una de las más usadas. Nos permite seleccionar un elemento cuando el usuario designa este elemento con algún dispositivo de señalización, por ejemplo el puntero del ratón, sin necesidad alguna de activarlo.

La pseudo-clase :active selecciona un elemento cuando este está siendo activado por el usuario. Por ejemplo cuando el usuario presiona el botón del ratón y luego lo suelta, lo que produce un evento de tiempo muy corto.

El orden de la declaración en las pseudo-clases dinámicas, en función de lo que se desea lograr, es muy importante. El comportamiento que normalmente se usa, teniendo en cuenta también las pseudo-clases relacionadas con enlaces, es el siguiente:


a:link {
    declaraciones;
}

a:visited {
    declaraciones;
}

a:focus {
    declaraciones;
}

a:hover {
    declaraciones;
}

a:active {
    declaraciones;
}

Pseudo-clases para formularios

Son muchas las novedades que CSS3 ha incluido en cuando al tratamiento de formularios mediante pseudo-clases, que unidas a las de las versiones anteriores nos dan una completa lista para darles estilo de casi cualquier forma:

  • :enabled: Selecciona un campo de entrada input que está en su estado por defecto, habilitado y listo para ser usado.
  • :disabled: Selecciona un elemento input que contiene el atributo disabled.
  • :checked: Selecciona una checkbox cuyo estado es "comprobado". Es un recurso muy usado que permite además de dar estilo a las checkboxes, crear iconos animados y menús ocultos mediante el checkbox hack.
  • :requiered: Permite seleccionar un elemento input que contiene el atributo requiered.
  • :valid: Selecciona un elemento input cuyo campo de entrada es válido en función al valor del atributo type.
  • :invalid: Selecciona un elemento input cuyo campo de entrada es no válido en función al valor del atributo type.

Pseudo-clases estructurales

Estas pseudo-clases permiten seleccionar un elemento en función a su posición en el árbol del documento y a su relación con otros elementos.

  • :root: Selecciona el elemento raíz del documento. Generalmente es el elemento html.
  • :first-child: Selecciona el primer elemento hijo, independientemente del tipo, en un elemento padre.
  • :last-child: Muy parecido al anterior, pero en este caso selecciona el último elemento hijo en un elemento padre, con independencia de su tipo.
  • :nth-child(n): Esta pseudo-clase permite seleccionar un elemento hijo en función a la posición que ocupa dentro de un elemento padre. El valor (n) puede ser un valor entero (que selecciona un único elemento), una fórmula como por ejemplo (5n) que selecciona "cada quinto elemento (5, 10, 15, ...)" o una fórmula de compensación como por ejemplo (5n+1), donde también se permiten valores negativos.
  • :nth-last-child(n): Funciona de forma parecida a :nth-child pero lo hace contanto de forma inversa y empezando por el último elemento hijo.
  • :first-of-type: Selecciona el primer elemento hijo, de este tipo, en un elemento padre.
  • :last-of-type: Al igual que el anterior selecciona el último elemento hijo, de este tipo, en un elemento padre.
  • nth-of-type(n): Selecciona un elemento del tipo indicado en función a la posición que ocupa dentro del elemento padre indicada por el valor de (n), que como ya vimos puede ser un valor entero, una fórmula o una una fórmula de compensación.
  • nth-last-of-type(n): Selecciona el elemento de igual forma que :nth-of-type(n) pero cuenta hacia arriba desde el último elemento.

Esto tipo de pseudo-clases son quizás las más confusas de entender, por lo cual las veremos más a fondo en un artículo dedicado sólo a ellas, donde ampliaré su descripción y veremos las fórmulas de una forma más completa, todo ello con la ayuda de unos cuantos ejemplos.