Selectores de pseudo clase en CSS

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 simples
• Selectores combinados
• Selectores de pseudo clase (este articulo)
• Selectores de pseudo elemento
• Selectores de atributo

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:

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.