Tiempo de lectura:3 Minutos, 21 Segundos

En artículos anteriores hemos visto qué es CSS y su sintaxis y ahora vamos a detallar la clasificación de selectores y los selectores de pseudo clase en CSS.

Clasificación de Selectores

Recuerda que podemos dividir los selectores en los siguientes bloques:

Selectores de pseudo clase

Anteriormente vimos los selectores simples y los selectores combinados, en esta ocasión veremos los selectores de estado que son aquellos selectores que utilizan el estado de un elemento para mostrarlo de una forma u otra, como cuando pasas el ratón por encima, cuando un vinculo ya lo has visitado o cuándo se enfoca un elemento.

Clasificación de pseudo clases

Existen muchas pseudo clases, las cuales se detallan en el siguiente cuadro:

SelectorEjemploDescripción
:activea:activeSelecciona el enlace activo
:checkedinput:checkedSelecciona todos los elementos marcados
:disabledinput:disabledSelecciona todos los elementos desactivados
:emptyp:emptySelecciona todos los elementos que no tienen hijos.
:enabledinput:enabledSelecciona todos los elementos habilitados
:first-childp:first-childSelecciona todos los elementos que son el primer hijo de su padre
:first-of-typep:first-of-typeSelecciona cada elemento que es el primer elemento de su padre
:focusinput:focusSelecciona el elemento que tiene el foco
:hovera:hoverSelecciona enlaces al pasar el mouse por encima
:in-rangeinput:in-rangeSelecciona elementos con un valor dentro de un rango especificado
:invalidinput:invalidSelecciona todos los elementos con un valor no válido
:lang(language)p:lang(es)Selecciona cada elemento con un valor de atributo lang que comienza con «es»
:last-childp:last-childSelecciona todos los elementos que son el último hijo de su padre
:last-of-typep:last-of-typeSelecciona cada elemento que es el último elemento de su padre
:linka:linkSelecciona todos los enlaces no visitados
:not(selector):not(p)Selecciona cada elemento que no es un elemento
:nth-child(n)p:nth-child(2)Selecciona cada elemento que es el segundo hijo de su padre
:nth-last-child(n)p:nth-last-child(2)Selecciona cada elemento que es el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)p:nth-last-of-type(2)Selecciona cada elemento que es el segundo elemento de su padre, contando desde el último hijo
:nth-of-type(n)p:nth-of-type(2)Selecciona cada elemento
que es el segundo elemento
de su padre
:only-of-typep:only-of-typeSelecciona cada elemento
que es el único elemento
de su padre
:only-childp:only-childSelecciona cada elemento
que es el único hijo de su padre
:optionalinput:optionalSelecciona elementos sin atributo «obligatorio»
:out-of-rangeinput:out-of-rangeSelecciona elementos con un valor fuera de un rango especificado
:read-onlyinput:read-onlySelecciona elementos con un atributo «readonly» especificado
:read-writeinput:read-writeSelecciona elementos sin atributo «readonly»
:requiredinput:requiredSelecciona elementos con un atributo «obligatorio» especificado
:rootrootSelecciona el elemento raíz del documento
:target#news:targetSelecciona el elemento #news activo actual
:validinput:validSelecciona todos los elementos con un valor válido
:visiteda:visitedSelecciona todos los enlaces visitados

Ejemplo 1 – Enlaces

Si utilizamos este tipo de pseudo clase podemos conseguir que los vínculos se muestren de una forma u otra según si ya se han visitado, al posicionarse encima, etc.

Un ejemplo de su utilización seria el siguiente:

Es importante el orden de estas pseudo clases ya que deben escribirse según se muestra en el ejemplo aunque no distingue entre minúsculas y mayusculas.

Ten en cuenta que las pseudo clases no son exclusivas del elemento «a» se pueden utilizar con otros como por ejemplo el elemento «div»

Ejemplo 1 – :first-child

La pseudo clase :first-child aplica el estilo al primer hijo. En el siguiente ejemplo se le aplicara el estilo al primer elemento «p» que se encuentra.

Si tuviéramos el siguiente código HTML se aplicara el estilo al párrafo 1.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Perfiles en Redes Sociales