Pseudo-clases en CSS

Las pseudo-clases permiten definir el estado especial de un elemento. En este post hablaré de pseudo-clases basados en atributos, interacción del usuario y de control de formulario. Todavía quedarían por tratar las pseudo-clases estructurales que las dejaré para otro post.

:enabled

Permite seleccionar un elemento que esté activo. Por defecto los elementos ya tienen enabled.

CSS

HTML

:disabled

Selecciona los elementos que no estén activos.

:checked

Orientado a los checkbox o radio buttons que estén seleccionados o con el tick.

:indeterminate

Se refiere aquellos checkbox que no están ni seleccionados ni deseleccionados. Esta propiedad es cambiada via javascript.

El código javascript iría al final del <body>.

:target

Este selector se refiere al elemento actualmente objetivo de un ancla. Un ancla es un link que se refiere a un elemento concreto de la página usando el carácter “#”. Por ejemplo <a href=”#contenido”> Saltar al contenido</a>. Cuando se clique en ese vínculo, saltará al elemento con el id contenido.

Esto cambia la URL de la barra de dirección añadiendo #contenido. El selector :target haría referencia a #contenido, pero si clicas en otra ancla dirigida a #titulo, el selector :target pasaría hacer referencia a #titulo.

:default

Apunta al elemento por defecto en un formulario. Por ejemplo, en el formulario la acción por defecto es submit, por tanto el botón submit se vería afectado por la pseudo-clase.

:valid

Se aplica a elementos que son válidos basados en el type o pattern. Esto se trató en el tutorial de validación de formularios en HTML5.

:invalid

Se aplica a elementos requeridos que están vacíos o que no cumplen ciertos requisitos de los atributos type o pattern.

:in-range

Selecciona aquellos elementos con una limitación de rango y su valor está dentro de esas limitaciones.

:out-of-range

Lo contrario a in-range, su valor no está dentro del rango establecido.

:required

Aplicado a controles de formulario que tienen el atributo required. Puedes ver más en el tutorial de validación de formulario en HTML5.

:optional

Son aquellos controles del formulario que no tienen el atributo required.

:read-only

Hace referencia aquellos elementos cuyos contenidos son imposibles de alterar por el usuario. En mozilla hay que usar –moz.

:read-write

Se aplica a todos los elementos cuyos contenidos pueden ser alterados por el usuario. También hay que emplear –moz en caso de usar Firefox.

Y hasta aquí el post de hoy. El siguiente post de CSS ira destinado a las pseudo-clases estructurales. Espero que hayáis aprendido mucho. Saludos 🙂