:active : Se aplica mientras un elemento está activado por el usuario.
Ejemplo
See the Pen ObgXbK by Bernardo Martin (@bermartinv) on CodePen.
:link : Le permite seleccionar enlaces que todavia no hayan sido visitados.
Ejemplo
See the Pen ObgXbK by Bernardo Martin (@bermartinv) on CodePen.
:visited : Selecciona enlaces que ya han sido visitados
Ejemplo
See the Pen ObgXbK by Bernardo Martin (@bermartinv) on CodePen.
:hover :Seleccionaremos el elemento cuando pasemos por encima de él con el ratón.
Ejemplo
See the Pen ObgXbK by Bernardo Martin (@bermartinv) on CodePen.
:focus :Seleccionaremos el elemento cuando seleccionamos unelemento ya sea con el raton o con el teclado.
Ejemplo
See the Pen ObgXbK by Bernardo Martin (@bermartinv) on CodePen.
:focus-within :Seleccionará no sólo el elemento al que se aplicaría normalmente el enfoque, sino también el elemento padre.
:local-link : permite a los autores diseñar hipervínculos basados en la ubicación actual de los usuarios dentro de un sitio y diferenciar vínculos internos del sitio versus sitios externos.
Enlace de interes
:any-link : Selecciona todos los lementos pero que no esten visitados.
Ejemplo
See the Pen pseudoclases I by Bernardo Martin (@bermartinv) on CodePen.
:target :Este selector destaca el elemento que es el destino del ancla en la página activa.
Ejemplo
See the Pen pseudoclases II by Bernardo Martin (@bermartinv) on CodePen.
:lang :Es usado para seleccionar elementos con un atributo lang con un valor específico.
p:lang(fr) {
background: yellow;
}
:enabled :Selecciona aquellos elementos que están activos.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
:disabled :Selecciona aquellos elementos que no están activos.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
checked :Botones de opción o casillas de verificación que están seleccionadas.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
:indeterminate :Elementos del formulario que no están seleccionados.
Enlace de interes
:default : Se aplica a uno o más elementos de interfaz de usuario que son el valor predeterminado entre un conjunto de elementos similares.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
:valid : Elemento cuyo contenido se valida correctamente de acuerdo con la configuración del tipo de entrada. Esto permite que los campos válidos adopten una apariencia que ayude al usuario a confirmar que sus datos están correctamente formateados. Se basan en los atributos type o pattern.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
:invalid : Todo lo contrario a :valid nos permite saber los campos que no cumplen con la norma. Se basan en los atributos type o pattern.
Ejemplo
See the Pen pseudoclases III by Bernardo Martin (@bermartinv) on CodePen.
:in-range : Coincide cuando un elemento tiene su atributo de valor dentro de las limitaciones de rango especificadas para este elemento..
Ejemplo
See the Pen pseudoclases IV by Bernardo Martin (@bermartinv) on CodePen.
:out-of-range : Coincide cuando un elemento tiene su atributo de valor fuera de las limitaciones de rango especificadas para este elemento..
Ejemplo
See the Pen pseudoclases IV by Bernardo Martin (@bermartinv) on CodePen.
:required : Esto permite a los formularios indicar fácilmente qué campos deben tener datos válidos antes de que se pueda enviar el formulario.
Ejemplo
See the Pen pseudoclases IV by Bernardo Martin (@bermartinv) on CodePen.
:optional : Todos aquellos elementos de un formulario que no son :required.
Ejemplo
See the Pen pseudoclases IV by Bernardo Martin (@bermartinv) on CodePen.
:read-only : Se aplica a aquellos elementos en los que en el input tenemos el atributo readonly. Para el navegador mozilla pondremos -moz- .
Ejemplo
See the Pen pseudoclases IV by Bernardo Martin (@bermartinv) on CodePen.
:matches() : Anteriormente se utilizaba bajo el nombre de anynos facilita y reduce la cantidad de código a escribir. Con esta instrucción podemos dirigirnos a un grupo mayor de elemento sin tener que escribir tanto.
Ejemplo
:matches(section, article, aside, nav) h1
Es lo mismo que las posibles combinaciones de los elementos entre parentesis con h1.
:empty : Selecciona aquellos elementos que no contienen ningun caracter entre sus etiquetas de comienzo y fin.También se puede usar para aquellos elementos de input que todavía no se ha rellenado su campo.
:blank : Seleccionará un elemento siempre y cuando no tenga texto y ningún otro elemento secundario, independientemente del espacio en blanco. Así que podría contener espacio en blanco, saltos de línea, etc, y aún así calificaría.
:has() : Como indica su traducción es para redirigir un estilo a una secuencia de elementos.
section:not(:has(h1, h2, h3, h4, h5, h6)) Selecciona aquellos elementos que no contengan las etiquetas de cabecera.
a:has(> img) Selecciona un elemento que contenga a continuación una imagen.
:dir() : Va dirigido a los elementos que contengan el atributo dir
:dir( ltr | rtl ).
:current, :past, :future :Para orientar elementos durante una progresión de línea de tiempo, como subtítulos en un video.
:playing, :paused :Se usa tanto en videos y audios.
:placeholder-shown :Va dirigido a los input que contengan un placeholder y no tenga ningun value.
Ejemplo
See the Pen pseudoclases V by Bernardo Martin (@bermartinv) on CodePen.