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.