CSS Pseudo-clases


Ejemplo

Las pseudo-clases son palabras clave que permiten la selección en función de la información que se encuentra fuera del árbol del documento o que no pueden ser expresadas por otros selectores o combinadores. Esta información puede asociarse a cierto estado ( estado y pseudo-clases dinámicas ), a ubicaciones ( estructural y objetivo pseudo-clases), a negaciones de la primera (pseudo-clase de negación ) o a idiomas (pseudo-clase lang ). Los ejemplos incluyen si se ha seguido o no un enlace ( :visited ), el mouse se encuentra sobre un elemento ( :hover ), se marca una casilla de verificación ( :checked ), etc.

Sintaxis

selector:pseudo-class { 
    property: value;
}

Lista de pseudo-clases:

Nombre Descripción
:active Se aplica a cualquier elemento que el usuario active (es decir, haga clic).
:any Le permite crear conjuntos de selectores relacionados mediante la creación de grupos que
los artículos incluidos coincidirán. Esta es una alternativa a repetir un selector completo.
:target Selecciona el elemento activo actual #news (se hace clic en una URL)
que contiene ese nombre de ancla)
:checked Se aplica a elementos de radio, casilla de verificación o opción que están marcados
o cambiar a un estado "activado".
:default Representa cualquier elemento de la interfaz de usuario que sea el predeterminado entre un grupo de
elementos similares.
:disabled Se aplica a cualquier elemento de la interfaz de usuario que esté deshabilitado.
:empty Se aplica a cualquier elemento que no tenga hijos.
:enabled Se aplica a cualquier elemento de UI que esté en un estado habilitado.
:first Utilizado junto con la regla @page , esto selecciona la primera página en un
documento impreso.
:first-child Representa cualquier elemento que sea el primer elemento secundario de su padre.
:first-of-type Se aplica cuando un elemento es el primero del tipo de elemento seleccionado
dentro de su padre. Esto puede o no ser el primer hijo.
:focus Se aplica a cualquier elemento que tenga el enfoque del usuario. Esto puede ser dado por el
teclado del usuario, eventos del mouse u otras formas de entrada.
:focus-within Puede usarse para resaltar una sección completa cuando un elemento dentro de ella está enfocado. Coincide con cualquier elemento que coincida con la pseudo-clase: focus o que tiene un foco descendente.
:full-screen Se aplica a cualquier elemento mostrado en modo de pantalla completa. Selecciona toda la pila.
de elementos y no sólo el elemento de nivel superior.
:hover Se aplica a cualquier elemento que se encuentre sobre el dispositivo señalador del usuario, pero
no esta activado.
:indeterminate Aplica elementos de UI de radio o casilla de verificación que no están marcados ni
sin marcar, pero están en un estado indeterminado. Esto puede ser debido a una
Atributo del elemento o manipulación de DOM.
:in-range La pseudo-clase CSS :in-range coincide cuando un elemento tiene
su atributo de valor dentro de las limitaciones de rango especificadas para este elemento.
Permite a la página dar una retroalimentación de que el valor actualmente definido
El uso del elemento está dentro de los límites del rango.
:invalid Se aplica a <input> elementos <input> cuyos valores no son válidos de acuerdo con
El tipo especificado en el atributo type= .
:lang Se aplica a cualquier elemento que esté envolviendo el elemento <body> tiene un
lang= designado lang= atributo. Para que la pseudo-clase sea válida, debe
Contiene un código de idioma de dos o tres letras válido.
:last-child Representa cualquier elemento que sea el último elemento secundario de su padre.
:last-of-type Se aplica cuando un elemento es el último del tipo de elemento seleccionado dentro
su padre Esto puede o no ser el último hijo.
:left Utilizado junto con la regla @page , esto selecciona todos los elementos de la izquierda.
Páginas en un documento impreso.
:link Se aplica a cualquier enlace que no haya sido visitado por el usuario.
:not() Se aplica a todos los elementos que no coinciden con el valor pasado a
( :not(p) o :not(.class-name) por ejemplo. Debe tener un valor para ser
Válido y solo puede contener un selector. Sin embargo, puede encadenar múltiples :not selectores juntos.
:nth-child Se aplica cuando un elemento es el n -ésimo elemento de su padre, donde n
puede ser un número entero, una expresión matemática (por ejemplo, n+3 ) o las palabras clave
odd o even
:nth-of-type Se aplica cuando un elemento es el n -ésimo elemento de su padre de la
mismo tipo de elemento, donde n puede ser un entero, un matemático
la expresión (por ejemplo, n+3 ) o las palabras clave odd o even .
:only-child La pseudo-clase CSS :only-child representa cualquier elemento
que es el único hijo de su padre. Esto es lo mismo que
:first-child:last-child o :nth-child(1):nth-last-child(1) ,
Pero con una menor especificidad.
:optional La pseudo-clase CSS :optional representa cualquier elemento.
que no tiene el atributo requerido establecido en él. Esto permite
Formularios para indicar fácilmente los campos opcionales y darles un estilo acorde
:out-of-range La pseudo-clase CSS :out-of-range coincide cuando un elemento tiene su
atributo de valor fuera de las limitaciones de rango especificadas para este elemento.
Permite a la página dar una retroalimentación de que el valor actualmente definido utilizando el
El elemento está fuera de los límites del rango. Un valor puede estar fuera de un rango si es
ya sea más pequeño o más grande que los valores máximos y mínimos establecidos.
:placeholder-shown Experimental. Se aplica a cualquier elemento de formulario que muestre actualmente el texto de marcador de posición.
:read-only Se aplica a cualquier elemento que no sea editable por el usuario.
:read-write Se aplica a cualquier elemento editable por un usuario, como <input> elementos <input> .
:right Utilizado junto con la regla @page , esto selecciona todas las páginas correctas en un
documento impreso.
:root coincide con el elemento raíz de un árbol que representa el documento.
:scope CSS pseudo-clase coincide con los elementos que son una referencia
Punto para que los selectores coincidan contra.
:target Selecciona el elemento activo actual #news (se hace clic en una URL)
que contiene ese nombre de ancla)
:visited Se aplica a cualquier enlace que haya sido visitado por el usuario.

La :visited pseudoclase :visited no se puede usar para la mayoría de los estilos en muchos navegadores modernos porque es un agujero de seguridad. Vea este enlace para referencia.