Ayuda de Estudio

Pseudo-clases
Uso de pseudo-clases

Desarrollador front-end
 Ayuda de Estudio

Pseudo-clases

Pseudo-clase Ejemplo Función

:active a:active Selecciona un link activo

:checked input:checked Selecciona cada elemento <input> seleccionado

:disabled input:disabled Selecciona cada elemento <input> deshabilitado

:empty p:empty Selecciona cada elemento <p> vacío

Selecciona cada elemento <p> con un atributo de

:lang(language) p:lang(it)
lenguaje que empiece con “IT”

Selecciona cada elemento <p> que es el ultimo hijo de

:last-child p:last-child
sus padres

Selecciona cada elemento <p> que es el ultimo

:last-of-type p:last-of-type
elemento <p> de sus padres

Uso de pesudo-clases Desarrollador front-end

 Ayuda de Estudio

Pseudo-clases

Pseudo-clase Ejemplo Función

:enabled input:enabled Selecciona cada elemento <input> habilitado

Selecciona cada elemento <p> que es el primer hijo de

:first-child p:first-child
sus padres

Selecciona cada elemento <p> que es el primer

:first-of-type p:first-of-type
elemento <p> de sus padres

:focus input:focus Selecciona el elemento <input> que ha sido enfocado

Selecciona links cuando el mouse esta sobre un

:hover a:hover
elemento

Selecciona elementos <input> con el valor dentro del

:in-range input:in-range
rango definido

Selecciona todos los elemento <input> con un valor

:invalid input:invalid
invalido

Uso de pseudo-clases Desarrollador front-end

 Ayuda de Estudio

Pseudo-clases

Pseudo-clase Ejemplo Función

:link a:link Selecciona todos los links no visitados

:not(selector) :not(p) Selecciona cada elemento que no es un elemento <p>

Selecciona cada elemento <p> que es el segundo hijo de

:nth-child(n) p:nth-child(2)
sus padres

Selecciona cada elemento <p> que es el penultimo hijo

:nth-last-child(n) p:nth-last-child(2)
de sus padres

Selecciona cada elemento <p> que es el penúltimo

:nth-last-of-type(n) p:nth-last-of-type(2)
elemento <p> de sus padres

Selecciona cada elemento <p> que es el segundo

:nth-of-type(n) p:nth-of-type(2)
elemento <p> de sus padres
Selecciona cada elemento <p> que es el único elemento
:only-of-type p:only-of-type
<p> de sus padres

Uso de pseudo-clases Desarrollador front-end

 Ayuda de Estudio

Pseudo-clases

Pseudo-clase Ejemplo Función

Selecciona cada elemento <p> que es el único hijo de

:only-child p:only-child
sus padres

Selecciona elementos <input> con un atributo no

:optional input:optional
requerido

Selecciona elementos <input> con un valor fuera de

:out-of-range input:out-of-range
rango

Selecciona elementos <input> con un atributo

:read-only input:read-only
“readonly” especificado
Selecciona elementos <input> sin un atributo
:read-write input:read-write
“readonly” especificado
Selecciona elementos <input> con un atributo
:required input:required
“required” especificado

:root root Selecciona el elemento “Root” del documento

Uso de pseudo-clases Desarrollador front-end

 Ayuda de Estudio

Pseudo-clases

Pseudo-clase Ejemplo Función

:target #news:target Selecciona el elemento activo actual #news

Selecciona todos los elementos <input> con un valor

:valid input:valid
valido

:visited a:visited Selecciona todos los links visitados

Uso de pseudo-clases Desarrollador front-end