CSS - pseudo clases
Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado
especial del elemento seleccionado. Por ejemplo, :hover
aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.
Las pseudoclase, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en
relación con el contenido del árbol de documento, sino también en relación a factores externos como el
historial del navegador (:visited, por ejemplo), el estado de
su contenido
(como :checked en algunos elementos de
formulario)
, o la posición del ratón
(como :hover que
permite saber si el ratón está encima de un elemento o no)
.
Sintaxis general
Hover pseudo class
Este div aplica la clase clase-ejemplo incluida en el archivo
de css "3_pseudo-clases.css" en este mismo proyecto. Esta clase aplica un color de fondo al div
actual, sin embargo, aplicando la pseudoclase :hover se
realiza un cambio de color del fondo al pasar el mouse por arriba de este elemento.
Visited pseudo class
Este link aplica la clase clase-ejemplo incluida en el archivo de css "3_pseudo-clases.css" en este mismo proyecto. Esta clase aplica la pseudoclase :visited que en este caso hara que la fuente cambie si el link ya fue visitado.
Disabled pseudo class
Este boton aplica la clase clase-ejemplo incluida en el archivo
de css "3_pseudo-clases.css" en este mismo proyecto. Esta clase aplica la pseudoclase :disabled que en este caso aplicará cambios sobre este
elemento debido a que este div se encuentra marcado con el atributo disabled.
Checked pseudo class
La pseudo-clase :checked de CSS representa cualquier radio (), checkbox () u option (<option> en un elemento <select>) que está marcado o
conmutado a un estado on.
Este ejemplo aplicara el color rojo a los labels que esten asociados a un check que sea marcado:
Para mayor detalles sobre pseudo clases, su uso, sus aplicaciones y las distintas opciones existentes ver la
referencia en este link.