Tanto si eres nuevo en CSS como si tienes años de experiencia, es probable que te hayas encontrado con las pseudo-clases. La pseudo-clase más reconocida es probablemente :hover, que nos permite estilizar un elemento cuando está en estado de «hover», como cuando el puntero del ratón se sitúa sobre él.
Construyendo sobre conceptos de discusiones anteriores sobre margin:auto y CSS Floats, este artículo ofrece un análisis detallado de las pseudo-clases. Exploraremos qué son las pseudo-clases, cómo funcionan, cómo se pueden categorizar y cómo se diferencian de los pseudo-elementos.
Entendiendo las Pseudo-Clases
Una pseudo-clase es una palabra clave añadida a los selectores de CSS para definir un estado específico de un elemento HTML. Puedes añadir una pseudo-clase a un selector CSS usando la sintaxis de dos puntos :, como en a:hover { ... }.
Una clase CSS es un atributo aplicado a elementos HTML para imponer las mismas reglas de estilo, como para los elementos del menú superior o los títulos de los widgets de la barra lateral. Esencialmente, las clases CSS agrupan o clasifican elementos HTML que comparten características comunes.
Las pseudo-clases son similares a las clases CSS porque también aplican reglas de estilo a elementos con características compartidas. Sin embargo, mientras que las clases estándar son definidas por el usuario y visibles en el código fuente (por ejemplo, <div class="miClase">), las pseudo-clases son aplicadas por los agentes de usuario (como los navegadores) según el estado actual del elemento HTML.
El Papel de las Pseudo-Clases
El propósito de las clases CSS regulares es clasificar o agrupar elementos. Los desarrolladores agrupan elementos según el estilo deseado, creando clases como «menu-items», «buttons» o «thumbnails» para asegurar un diseño consistente en elementos similares. Estos agrupamientos se basan en características definidas por los desarrolladores.
Por ejemplo, un desarrollador podría usar un <div> como miniatura y clasificarlo con una clase «thumbnail».
Sin embargo, los elementos HTML poseen características inherentes basadas en su estado, posición, naturaleza e interacción con la página y el usuario. Estas características no se marcan típicamente en el código HTML, pero pueden ser objetivo de las pseudo-clases en CSS. Ejemplos incluyen:
- Un elemento que es el último hijo dentro de su elemento padre.
- Un enlace que ha sido visitado.
- Un elemento que ha pasado a pantalla completa.
Estos son los tipos de características típicamente abordadas por las pseudo-clases. Para comprender mejor la diferencia entre clases y pseudo-clases, consideremos el uso de la clase .last para identificar los últimos elementos en varios contenedores padres.
Puedes estilizar estos elementos last-child con el siguiente CSS:
Pero, ¿qué sucede cuando el último elemento cambia? Tendrás que actualizar manualmente la clase .last del elemento anterior al nuevo.
Este inconveniente de actualizar clases puede evitarse para ciertas características comunes. Por ejemplo, usar una pseudo-clase predefinida :last-child es altamente beneficioso. Con esto, no hay necesidad de marcar el último elemento en el código HTML, y aún puedes estilizarlo con el siguiente CSS:
Tipos Principales de Pseudo-Clases
CSS ofrece una variedad de pseudo-clases que permiten a los desarrolladores orientar elementos basados en características específicas que de otro modo serían difíciles de acceder. A continuación, se detallan algunos de los tipos más comunes:
Pseudo-Clases Dinámicas
Las pseudo-clases dinámicas se aplican a los elementos HTML de manera dinámica, basadas en el estado al que transicionan debido a las interacciones del usuario. Algunos ejemplos incluyen :hover, :focus, :link y :visited, todos ellos comúnmente utilizados con la etiqueta <a>.
Pseudo-Clases Basadas en el Estado
Las pseudo-clases basadas en el estado se aplican a los elementos cuando están en un estado estático específico. Ejemplos comunes incluyen:
:checkedpara checkboxes (<input type="checkbox">):fullscreenpara orientar cualquier elemento que se esté mostrando en modo pantalla completa.:disabledpara elementos que pueden estar deshabilitados, como<input>,<select>y<button>.
La pseudo-clase :checked es particularmente popular, ya que indica si un checkbox está seleccionado.
Pseudo-Clases Estructurales
Las pseudo-clases estructurales orientan elementos basados en su posición dentro de la estructura del documento. Algunos de los ejemplos más comunes incluyen :first-child, :last-child y :nth-child(n). Estas pueden utilizarse para estilizar elementos específicos basados en su posición dentro de un contenedor. Otro ejemplo es :root, que orienta al elemento padre de nivel más alto en el DOM.
Pseudo-Clases Misceláneas
Existen también pseudo-clases que no encajan fácilmente en otras categorías, como:
:not(x), que selecciona elementos que no coinciden con el selector especificadox.:lang(código-de-idioma)para orientar elementos según el idioma de su contenido.:dir(direccionalidad), que selecciona elementos con contenido en una direccionalidad específica (por ejemplo, de izquierda a derecha o de derecha a izquierda).
nth-child vs nth-of-type Pseudo-Clases
Uno de los aspectos más desafiantes de las pseudo-clases es entender la diferencia entre las pseudo-clases :nth-child y :nth-of-type.
Ambas son pseudo-clases estructurales que orientan elementos específicos dentro de un elemento padre (contenedor), pero lo hacen de maneras distintas.
Suponiendo que n sea 2, el selector :nth-child(n) orienta un elemento que es el segundo hijo de su elemento padre, independientemente del tipo de elemento. Por otro lado, :nth-of-type(n) orienta la segunda ocurrencia de un tipo específico de elemento (por ejemplo, un párrafo) dentro del elemento padre.
Veamos un ejemplo para ilustrar esta diferencia:
Ahora veamos cómo este CSS afecta al HTML en dos escenarios diferentes.
Caso 1
En el Caso 1, el segundo elemento dentro de un <div> es una lista no ordenada, por lo que la regla :nth-child(2) no se aplica a los párrafos. Aunque la lista no ordenada es el segundo hijo, no es un párrafo.
Si, sin embargo, el elemento padre contiene un segundo párrafo, la regla :nth-of-type(2) se aplicará, ya que esta regla orienta específicamente a elementos <p> e ignora otros tipos de elementos (como listas no ordenadas) dentro del elemento padre.
En nuestro ejemplo, la regla :nth-of-type(2) estilizará el segundo párrafo, que es el Hijo 3 en este caso.
Caso 2
En el Caso 2, movemos la lista no ordenada a la tercera posición, colocando el segundo párrafo antes de ella. Ahora, tanto la regla :nth-child(2) como :nth-of-type(2) se aplicarán, ya que el segundo párrafo es tanto el segundo hijo de su elemento padre <div> como el segundo elemento <p>.
Si usas SASS, Family.scss puede ayudarte a crear elementos complejos basados en nth-child.
Pseudo-Clases vs Pseudo-Elementos
Al discutir pseudo-clases, es crucial entender cómo se diferencian de los pseudo-elementos para evitar confusiones.
Los pseudo-elementos, como ::before y ::after (consulta este tutorial sobre cómo usarlos), también son añadidos por los agentes de usuario y pueden ser orientados y estilizados con CSS de manera similar a las pseudo-clases.
La diferencia clave es que las pseudo-clases se utilizan para seleccionar elementos HTML que ya existen en el árbol del documento, aunque no estén marcados explícitamente, mientras que los pseudo-elementos nos permiten estilizar elementos que típicamente no existen en el DOM por sí mismos. Ejemplos incluyen ::before y ::after, o partes de elementos existentes como ::first-letter y ::placeholder.
Además, hay una diferencia en la sintaxis: los pseudo-elementos generalmente se escriben con dos puntos dobles ::, mientras que las pseudo-clases usan un solo punto :. Esto puede ser confuso porque, en CSS2, los pseudo-elementos también se marcaban con un solo punto, y los navegadores aún admiten esta sintaxis más antigua.
Adicionalmente, existen diferencias en cómo podemos orientar pseudo-clases y pseudo-elementos con CSS.
1. Su Lugar en la Secuencia de Selectores CSS
Los pseudo-elementos deben aparecer después de la secuencia de selectores, mientras que las pseudo-clases pueden colocarse en cualquier parte dentro de la secuencia de selectores CSS.
Por ejemplo, puedes orientar el último elemento de una lista <ul> de dos maneras diferentes:
O
El primer selector orienta al último hijo dentro del elemento <ul> que tiene la clase .red, mientras que el segundo selector orienta al último hijo entre los elementos que poseen la clase .red dentro de <ul>. Como puedes ver, la posición de la pseudo-clase puede variar.
Intentemos algo similar con pseudo-elementos.
El CSS anterior es válido, y el texto «red» aparecerá después de los elementos <li> con la clase .red.
Sin embargo, el siguiente código no funcionará porque no podemos cambiar la posición de un pseudo-elemento dentro de la secuencia del selector.
2. Número de Ocurrencias en una Secuencia de Selectores
Solo se puede usar un pseudo-elemento por selector, mientras que las pseudo-clases pueden combinarse siempre que la combinación tenga sentido. Por ejemplo, para orientar elementos first-child que también son de solo lectura, puedes combinar las pseudo-clases :first-child y :read-only de la siguiente manera:
Extensiones de Selectores jQuery
No toda la sintaxis de selectores que incluye un : es una pseudo-clase CSS adecuada. Si has usado jQuery, es posible que estés familiarizado con selectores como $(' :checkbox'), $(' :input') y $(' :selected').
Es importante señalar que estos no son pseudo-clases CSS que están siendo orientadas por jQuery. En cambio, se conocen como extensiones de selectores jQuery.
Las extensiones de selectores jQuery te permiten orientar elementos HTML con palabras clave más simples. Muchas de estas extensiones son abreviaturas para combinaciones de selectores CSS estándar, representadas por una sola palabra clave.
Conclusión
Las pseudo-clases son herramientas poderosas en CSS que permiten a los desarrolladores orientar y estilizar elementos en función de sus estados, posiciones y relaciones dentro del DOM. Comprender cómo y cuándo usarlas, así como diferenciarlas de los pseudo-elementos, es crucial para crear un diseño web dinámico y accesible. Con esta guía, ahora tienes una base sólida para aprovechar al máximo las pseudo-clases en tus proyectos de CSS.