Selectores en CSS3: pseudo-clases de estado

En CSS hay pseudo-clases que pueden hacer referencia al estado especial de un elemento. Uno muy común es cuando se pasa el ratón por encima. CSS3 incorpora nuevas pseudo-clases de estado más complejas.

Selector target

Con este selector los elementos que sean objetivo de una url tendrán un estilo. Por ejemplo, cuando se clica en un link y su href apunta al id de un elemento, al pulsar ese vínculo cambiará el diseño del elemento. Por ejemplo, tengo un título y enlace apunta a él.

Si le aplico unas reglas css con la pseudo-clase target, en este caso que las letras sean rojas, cuando clique el enlace el título debería verse en rojo.

Selectores enabled y disabled

Los inputs pueden desactivarse y activarse y cuando esto sucede se pueden seleccionar para aplicarle un estilo.

Para este ejemplo, los inputs disabled serán casi transparentes y los que estén activos tendrán un borde verde.

Selector checked

Esto selector está enfocado para los inputs checkbox y radio e incluso los tipo option que se usan en los select. Cuando están checkeados/seleccionados se les puede aplicar un diseño.

Los checkbox y radio con tick se desplazarán a la derecha mientras que la opción seleccionada en el select aumentará su tamaño.

Selector not

Este no sería de estado, pero está bien mencionarlo. Permite aplicar un estilo a elementos que no representen lo que haya dentro del :not. Es decir, aplicar estilo a todos los elementos que no sean… Sólo acepta un selector simple, por ejemplo

Pondré de color verde aquellos párrafos que no tengan la clase “diferente”.

Y hasta aquí las pseudo-clases de estado, espero que os resulten útiles. A seguir picando 🙂