Tiempo de lectura:3 Minutos, 19 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:

div:hover {
  background-color: red;
}

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.

/* enlace no visitado */
a:link {
  color: #000080;
}

/* enlace visitado */
a:visited {
  color: #000080;
}

/* al posicionarse encima del enlace */
a:hover {
  color: #000080;
}

/* enlace selecionado */
a:active {
  color: #000080;
}

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.

p:first-child {
  color: green;
} 

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.

Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y los términos de servicio de Google.

Perfiles en Redes Sociales