Pseudo-classes
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.
div:hover {
background-color: #F89B4D;
}
Las pseudoclases, 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).
Nota:
En lugar de usar pseudoclases, pseudo-elements puede usarse para dar estilo a una parte específica de un elemento.
Sintaxis
selector:pseudoclase { propiedad: valor; }
Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.
Indice de las pseudo-clases estándar
:active:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
Especificaciones
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scoping Module Level 1 |
| CSS Paged Media Module Level 3 |