Guía definitiva para entender las pseudo clases de CSS - Parte 1

Da igual que seas un novato en CSS o un diseñador experimentado, es probable que hayas oído hablar de las pseudo-clases. Las pseudo-clases que más conozcas probablemente sea :hover, con la que podemos dar estilo a un elemento cuando se hace hover, es decir, cuando posamos el ratón o el puntero encima de dicho elemento.

En este artículo vamos a echar un vistazo muy de cerca a estos curiosos aliados del código CSS. Veremos exáctamente que son las pseudo-clases, cómo funcionan, cómo podemos categorizarlas y las principales diferencias con los pseudo-elementos.

¿Qué son las pseudo-clases?

Una pseudo-clase es una palabra clave que podemos añadir a los selectores CSS con el fin de definir un estado especial del elemento HTML al que pertenece. Podemos añadir una pseudo-clase a un selector CSS usando el caracter dos puntos (:) de la siguiente manera: a:hover {...}

Una clase de CSS es un atributo que podemos añadir a los elementos HTML a los cuales queremos aplicar las mismas reglas de estilo, como elementos principales de un menú o los títulos de los widgets de un sidebar. En otras palabras, podemos utilizar las clases de CSS para agrupar o clasificar los elementos HTML que son similares de un modo u otro.

Las pseudo-clases son similares, en el sentido de que también se utilizan para agregar reglas de estilo a elementos que comparten la mismas características.

Pero, mientras que las clases de CSS son definidas por el usuario y se puede trastear en su código fuente, por ejemplo, cuando definimos la clase “miClase” nosotros somos quien definimos su comportamiento, las pseudo-clases son añadidas por UA (user agents), como los navegadores web, basándose en el estado actual del elemento al que pertenece.

Propósitos de las pseudo-clases

La función de las clases normales de CSS es la de clasificar y agrupar elementos. Los desarrolladores, por norma general, saben cómo agrupar dichos elementos: por ejemplo, los enlaces de un menú, botones, miniaturas, etc. Todos estos elementos similares se agrupan para darles estilo. Estas clasificaciones se basan en las características de los elementos dadas por los propios desarrolladores.

Por ejemplo, si un desarrollador decide utilizar un div como contenedor de una miniatura, lo puede clasificar así otorgándole la clase personalizada que él haya visto oportuno, como por ejemplo thumbnail.

<div class="thumbnail">[...]</div>

Los elementos HTML, sin embargo, poseen sus propias características comunes en función de su estado, posición, naturaleza e interacción con la página y el usuario. Estas características normalmente no vienen reflejadas en el código HTML, pero puedes hacerles referencia mediante pseudo-clases de CSS, por ejemplo:

  • Un elemento que es el último hijo dentro de su elemento padre
  • Un enlace que ya ha sido visitado
  • Un elemento que está a pantalla completa.

Estos son el tipo de características que generalmente son el blanco de las pseudo-clases. Para entender la diferencia entre las clases y pseudo-clases mejor, vamos a suponer que estamos utilizando la clase .last para identificar los últimos elementos de diferentes contenedores padres.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

Podemos dar estilo a dichos elementos hijos con clase last de la siguiente manera en CSS:

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

¿Pero qué sucede si cambia el último elemento? Bueno, pues que tendremos que mover la clase .last del anterior elemento .last al actual.

Esta actualización de clases tan molesta puede dejarse en manos del UA, por lo menos para aquellas características que son comunes entre elementos. Tener una pseudo-clase pre-definida como :last-child es muy útil. De esta manera, no tienes que indicar cuál es el último elemento en el código HTML, y encima, podrás personalizarlo. Atento a este código CSS:

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

Principales tipos de pseudo-clases

Existen muchos tipos de pseudo-clases. Todas ellas nos proporcionan medios para localizar elementos en función de sus características, ya que de otro modo serían inaccesibles. He aquí un listado de pseudo-clases.

Pseudo-clases dinámicas

La pseudo-clases dinámicas se agregan o se eliminan de los elementos HTML de forma dinámica, en función del estado de su transición en respuesta con las interacciones del usuario. Algunas pseudo-clases dinámicas que puedes conocer son :hover, :focus, :link, y :visited, las cuales se pueden aplicar en un tag a.

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

Pseudo-clases basadas en el estado

Las pseudo_clases basadas en el estado son añadidas a los elementos cuando están en un particular estado estático. Las pseudo-clases basadas en el estado más famosas podrían ser:

  • :checked, la cual se aplica a checkboxes
  • :fullscreen para referenciar cualquier elemento que actualmente se está mostrando a pantalla completa
  • :disabled para elementos que pueden deshabilitarse, como los input, select o button.

La pseudo-clases basada en el estado más popular puede ser :checked, que indica si un checkbox está marcado o no.

.checkbox:checked + label{
  font-style:italic;
}
input:disabled{
  background-color: #EEEEEE;
}

En el próximo artículo veremos dos tipos más de pseudo clases y os mostraré más características sobre las pseudo-clases. Os espero...

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP