Tutorial CSS: Pseudo-clases y pseudo-elementos

¿Qué son las pseudo-clases y para qué sirven?

Las pseudo-clases son una característica de CSS que permiten aplicar estilos específicos a elementos en función de su estado o posición dentro del árbol DOM, sin necesidad de agregar clases adicionales en el HTML. Estas pseudo-clases proporcionan una manera de seleccionar elementos en situaciones más complejas y contextuales que los selectores regulares.

Las pseudo-clases se indican con un carácter de dos puntos (:) seguido del nombre de la pseudo-clase. Se usan comúnmente para manejar interacciones del usuario, como efectos de hover, focus, y active, así como para seleccionar elementos en base a su estructura o estado en el DOM.

Ejemplo básico de pseudo-clases

Aplicación de estilos diferenciados para los estados de hover y focus de un botón:

button {
    background-color: #4CAF50; /* Color de fondo por defecto */
    color: white; /* Color de texto por defecto */
}

button:hover {
    background-color: #45a049; /* Cambio de color cuando el puntero está sobre el botón */
}

button:focus {
    outline: none; /* Quitar el borde por defecto al enfocar */
    box-shadow: 0 0 10px #719ECE; /* Añadir sombra azulada */
}

En este ejemplo, se aplican diferentes estilos al botón cuando el usuario coloca el cursor sobre el botón (:hover) o cuando el botón obtiene el foco (:focus).

Selección basada en estados

Otra utilidad de las pseudo-clases es aplicar estilos según el estado de un elemento de formulario. Por ejemplo, cambiar el borde de los campos de formulario cuando están en un estado inválido:

input:invalid {
    border: 2px solid red; /* Bordes rojos para campos inválidos */
}

input:valid {
    border: 2px solid green; /* Bordes verdes para campos válidos */
}

En este escenario, los estilos cambian dependiendo de la validez del input, lo cual es fundamental en formularios para indicar visualmente al usuario que hay un error o que el campo es correcto.

Ventajas de usar pseudo-clases

1. Simplificación de la estructura HTML al evitar clases adicionales.
2. Manejo dinámico de estilos que responden a interacciones del usuario sin JavaScript.
3. Seleccionar elementos sin una clase específica o id, aprovechando la relación y posición en el DOM.

Las pseudo-clases mejoran significativamente la flexibilidad y capacidad del desarrollador para aplicar estilos CSS de una manera más precisa y contextual, sin sobrecargar el HTML con clases y IDs adicionales. Esto facilita tanto la gestión de estilos como la mantenibilidad del código.

Pseudo-clases dinámicas y pseudo-clases de estado

Las pseudo-clases dinámicas y pseudo-clases de estado permiten aplicar estilos a los elementos en respuesta a eventos del usuario o cambios de estado en el DOM. Esto facilita la creación de interfaces de usuario interactivas y responsivas sin necesidad de JavaScript.

:hover

La pseudo-clase :hover aplica estilos a un elemento cuando el usuario coloca el puntero sobre él. Es muy utilizada para mejorar la interactividad en los enlaces y botones.

a:hover {
    color: #ff4500; /* Cambia el color del texto al pasar el ratón por encima */
    text-decoration: underline; /* Añade subrayado */
}

:active

La pseudo-clase :active selecciona un elemento mientras está siendo activado por el usuario, como cuando se presiona un botón del ratón.

button:active {
    background-color: #005f5f; /* Cambia el color de fondo del botón cuando es presionado */
    transform: translateY(2px); /* Añade un efecto visual de pulsación */
}

:focus

La pseudo-clase :focus aplica estilos a un elemento cuando este ha recibido el foco, por ejemplo, cuando se hace clic en un campo de entrada o se navega a él usando el teclado.

input:focus {
    outline: 2px solid #0066cc; /* Bordes destacados cuando el input está enfocado */
}

:focus-within

La pseudo-clase :focus-within aplica estilos a un elemento si este o alguno de sus descendientes tiene el foco. Es útil para resaltar contenedores o formularios completos.

form:focus-within {
    border: 2px solid #ff4500; /* Resalta el borde del formulario cuando un campo interno tiene el foco */
}

:visited

La pseudo-clase :visited permite cambiar los estilos de enlaces que han sido visitados. No soporta todas las propiedades CSS por razones de privacidad.

a:visited {
    color: #551a8b; /* Cambia el color del enlace después de haberlo visitado */
}

:link

La pseudo-clase :link se aplica a todos aquellos enlaces (a) que no han sido visitados por el usuario.

a:link {
    color: #0000ee; /* Estilo de los enlaces no visitados */
}

:disabled

La pseudo-clase :disabled se aplica a elementos de formulario que están deshabilitados y no interactivos.

input:disabled {
    background-color: #e9e9e9; /* Fondo gris para inputs deshabilitados */
    color: #a0a0a0; /* Texto gris para inputs deshabilitados */
}

:enabled

La pseudo-clase :enabled selecciona los elementos de formulario que son interactivos.

input:enabled {
    border: 1px solid #000000; /* Bordes estándar para inputs habilitados */
}

:checked, :unchecked, :indeterminate

Estas pseudo-clases se usan conjuntamente con los elementos de formularios, particularmente checkbox y radio.

input:checked {
    background-color: #00ff00; /* Fondo verde para elementos seleccionados */
}

input:indeterminate {
    background-color: #ffff00; /* Fondo amarillo para elementos en estado indeterminado */
}

:valid y :invalid

Permiten aplicar estilos a los elementos de formulario basado en la validación de sus valores.

input:valid {
    border: 2px solid #00cc00; /* Bordes verdes para campos válidos */
}

input:invalid {
    border: 2px solid #cc0000; /* Bordes rojos para campos inválidos */
}

Estas pseudo-clases dinamizan y flexibilizan la interacción y el feedback visual en las interfaces web, haciendo los elementos reactivos a las acciones y estados del usuario de manera eficiente y sin necesitar JavaScript.

Pseudo-clases estructurales y otras pseudo-clases

Las pseudo-clases estructurales permiten aplicar estilos CSS en función de la posición de un elemento dentro de la estructura del DOM. Estas pseudo-clases son fundamentales para diseñar layouts y aplicar estilos específicos a elementos basándonos en su ubicación relativa a otros.

:first-child, :last-child, :nth-child() y :nth-last-child()

:first-child

Selecciona el primer hijo de su padre.

p:first-child {
    font-weight: bold; /* Aplica negrita al primer párrafo hijo del contenedor */
}

:last-child

Selecciona el último hijo de su padre.

p:last-child {
    color: blue; /* Cambia el color del último párrafo a azul */
}

:nth-child()

Selecciona el hijo que ocupa la posición dada. Acepta fórmulas (como 2n para seleccionar cada segundo hijo).

/* Selecciona cada tercer párrafo */
p:nth-child(3n) {
    background-color: lightgrey;
}

:nth-last-child()

Funciona similar a :nth-child(), pero empieza a contar desde el final del padre.

/* Selecciona el segundo hijo desde el final */
li:nth-last-child(2) {
    font-style: italic;
}

:first-of-type, :last-of-type, :nth-of-type() y :nth-last-of-type()

:first-of-type

Selecciona el primer elemento de su tipo entre los hijos de su padre.

/* Selecciona el primer párrafo de su tipo */
div p:first-of-type {
    text-decoration: underline;
}

:last-of-type

Selecciona el último elemento de su tipo entre los hijos de su padre.

/* Selecciona el último párrafo de su tipo */
div p:last-of-type {
    letter-spacing: 1px;
}

:nth-of-type()

Selecciona el enésimo elemento de su tipo entre los hijos de su padre.

/* Selecciona cada cuarto párrafo de su tipo */
p:nth-of-type(4n) {
    margin-left: 10px;
}

:nth-last-of-type()

Selecciona el enésimo elemento de su tipo, comenzando desde el último.

/* Selecciona el tercer párrafo desde el final de su tipo */
p:nth-last-of-type(3) {
    border-bottom: 2px solid black;
}

:only-child, :only-of-type

:only-child

Selecciona un elemento que es el único hijo de su padre.

/* Selecciona lista de elementos que sean los únicos hijos de su contenedor */
ul:only-child {
    border: 2px solid red;
}

:only-of-type

Selecciona un elemento que es el único de su tipo entre los hijos de su padre.

/* Se aplica a los únicos párrafos dentro de sus contenedores */
p:only-of-type {
    padding: 5px;
    background-color: #f0f0f0;
}

:empty

La pseudo-clase :empty selecciona elementos que no tienen hijos, incluyendo texto o nodos de comentarios.

/* Aplica un fondo gris a los elementos vacíos */
div:empty {
    background-color: #e0e0e0;
}

:not()

La pseudo-clase :not() selecciona todos los elementos que no coinciden con una lista de selectores.

/* Aplica estilo a todos los párrafos que no tienen clase 'intro' */
p:not(.intro) {
    color: #333;
}

:root y :lang()

:root

Selecciona el elemento raíz del documento. Normalmente, es el elemento <html>.

/* Definición de variables de CSS en el elemento raíz */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

:lang()

Selecciona elementos basados en su atributo de idioma.

/* Selecciona párrafos en inglés */
p:lang(en) {
    font-style: italic;
}

Estas pseudo-clases estructurales y otras pseudo-clases permiten un control detallado y contextual sobre el estilo de los elementos en CSS, mejorando la capacidad de diseño y la flexibilidad sin modificar la estructura HTML.

¿Qué son los pseudo-elementos y para qué sirven?

Los pseudo-elementos en CSS permiten aplicar estilos a partes específicas de un elemento de una manera que no es posible utilizando solo selectores de clase o id. Los pseudo-elementos se escriben con la sintaxis de dos puntos dobles (::) antes del nombre del pseudo-elemento. Tipos comunes de pseudo-elementos incluyen ::before, ::after, ::first-line y ::first-letter.

Aplicación de pseudo-elementos

::before y ::after

::before y ::after permiten insertar contenido antes o después del contenido real de un elemento, respectivamente. Este contenido es generado solo visualmente y no afecta al DOM.

Ejemplo de uso para insertar un icono y un punto después de un enlace:

a::before {
    content: "🔗 "; /* Inserta un icono antes del enlace */
}

a::after {
    content: " (enlace)";
    font-size: 0.8em; /* Define el tamaño del texto insertado */
    color: #888; /* Color gris */
}

::first-line y ::first-letter

::first-line permite aplicar estilos específicos a la primera línea de un bloque de texto. ::first-letter hace lo mismo con la primera letra.

Ejemplo de uso para estilizar la primera línea y la primera letra de un párrafo:

p::first-line {
    font-weight: bold; /* Texto en negrita */
    color: #ff4500; /* Color naranja */
}

p::first-letter {
    font-size: 200%; /* Tamaño doble al estándar */
    color: #0073e6; /* Color azul */
    float: left; /* Flota la primera letra a la izquierda */
    margin-right: 0.1em; /* Margen a la derecha */
}

Ventajas y usos avanzados

Los pseudo-elementos simplifican la inserción de contenido decorativo sin requerir cambios en el HTML. Son particularmente útiles para:

1. Decoraciones de texto: Añadir iconos, comillas estilizadas, y otros detalles visuales sin alterar el contenido.
2. Estilos de contenido específico: Aplicar estilos solo a partes del contenido, como la primera línea o letra, optimizando la presentación.
3. Flexibilidad y limpieza: Mantener el HTML limpio y semántico, sin inyectar elementos adicionales solo para aplicar estilos.

Ejemplo de utilización avanzada con ::after para un efecto de aclaración:

button:hover::after {
    content: "✓"; /* Agrega un checkmark */
    color: green; /* Color verde */
    margin-left: 5px; /* Espaciado respecto al botón */
}

Mediante el uso de pseudo-elementos, CSS ofrece una mayor capacidad de diseño, permitiendo a los desarrolladores aplicar estilos complejos y contextuales que se adaptan a diversas necesidades visuales y de interacción, sin comprometer la estructura del documento.

Pseudo-elementos comunes

Los pseudo-elementos en CSS permiten a los desarrolladores aplicar estilos a partes específicas de un elemento, mediante la adición de contenido generado y el estilizado de porciones del texto. Aquí se describen los pseudo-elementos más comunes: ::before, ::after, ::first-line, y ::first-letter.

El formato para utilizar un pseudo-elemento consiste en dos puntos dobles (::) seguidos del nombre del pseudo-elemento. Esta sintaxis ayuda a distinguirlos de las pseudo-clases.

::before y ::after

::before y ::after son dos de los pseudo-elementos más utilizados, permitiendo insertar contenido antes y después del contenido de un elemento, respectivamente. Este contenido generado no afecta al DOM y solo se muestra visualmente.

Ejemplo de uso:

/* Inserta contenido antes del elemento */
.elemento::before {
    content: "🌟"; /* Se muestra una estrella antes del contenido del elemento */
    display: inline-block; /* Asegura que el contenido insertado se comporte correctamente en línea */
    margin-right: 5px; /* Añade espacio entre la estrella y el contenido original */
}

/* Inserta contenido después del elemento */
.elemento::after {
    content: "⭐"; /* Se muestra una estrella después del contenido del elemento */
    display: inline-block; /* Asegura que el contenido insertado se comporte correctamente en línea */
    margin-left: 5px; /* Añade espacio entre el contenido original y la estrella insertada */
}

::first-line

::first-line aplica estilos exclusivamente a la primera línea de un bloque de contenido. Es útil para destacar la primera línea de un párrafo sin necesidad de envolverla en un contenedor adicional.

Ejemplo de uso:

p::first-line {
    font-weight: bold; /* Se aplica negrita a la primera línea */
    color: #2c3e50; /* Se cambia el color de la primera línea */
    text-transform: uppercase; /* Convierte la primera línea a mayúsculas */
}

::first-letter

::first-letter permite estilizar la primera letra de un elemento de bloque. Comúnmente se utiliza para generar efectos de capitulares, muy comunes en periódicos y revistas.

Ejemplo de uso:

p::first-letter {
    font-size: 200%; /* Doble del tamaño de la letra base */
    font-weight: bold; /* Negrita */
    color: #e74c3c; /* Color rojo para la primera letra */
    float: left; /* Flotación a la izquierda */
    margin-right: 5px; /* Espaciado respecto al resto del texto */
}

Consideraciones avanzadas

El poder de los pseudo-elementos se aprovecha mejor cuando se combinan con otras propiedades de CSS para mejorar la experiencia de usuario y la presentación visual sin modificar el HTML.

Un ejemplo avanzado es el uso de ::after para crear mensajes de feedback visual:

/* Añade un mensaje de validación después del input */
input:valid::after {
    content: "✔️"; /* Checkmark indicativo de campo válido */
    color: #27ae60; /* Color verde */
    margin-left: 10px; /* Espaciado entre el input y el checkmark */
}

/* Añade un mensaje de error después del input */
input:invalid::after {
    content: "✖️"; /* Cruz indicativa de campo inválido */
    color: #e74c3c; /* Color rojo */
    margin-left: 10px; /* Espaciado entre el input y la cruz */
}

Los pseudo-elementos permiten a los desarrolladores añadir detalles visuales y funcionales de forma elegante y eficiente, manteniendo el HTML limpio y semántico. La capacidad de insertar contenido antes y después de los elementos, y de estilizar selectivamente porciones del texto, proporciona flexibilidad y control en el diseño web.

Pseudo-elementos modernos

Los pseudo-elementos modernos en CSS extienden las capacidades de estilizado al permitir seleccionar y aplicar estilos a partes específicas de problemas visuales o estructurales que no se abordaban con los pseudo-elementos tradicionales. Estos pseudo-elementos avanzados permiten a los desarrolladores implementar diseños más complejos y detallados sin cambiar la estructura del HTML.

::marker

El pseudo-elemento ::marker permite aplicar estilos a los marcadores de lista (li), como puntos, números o cualquier otro símbolo que se utilice como marcador.

Ejemplo de uso:

/* Cambia el color y el tamaño de los marcadores de lista */
li::marker {
    color: #ff4500; /* Color naranja */
    font-size: 1.5em; /* Tamaño de fuente más grande */
}

::selection

El pseudo-elemento ::selection permite aplicar estilos a la parte del documento que ha sido seleccionada por el usuario, como el texto resaltado con el ratón o mediante el teclado.

Ejemplo de uso:

/* Cambia el fondo y el color del texto seleccionado */
::selection {
    background: #639; /* Fondo morado */
    color: white; /* Texto blanco */
}

/* Selección más específica dentro de párrafos */
p::selection {
    background: #ff4500; /* Fondo naranja */
    color: black; /* Texto negro */
}

::backdrop

El pseudo-elemento ::backdrop se utiliza en contextos de elementos que presentan contenido en diálogos modales completos (<dialog>), permitiendo aplicar estilos al fondo que aparece detrás del contenido modal.

Ejemplo de uso:

/* Estilo para el fondo de un diálogo modal */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semi-transparente */
}

::part y ::theme

Los pseudo-elementos ::part y ::theme están diseñados para su uso con componentes web y permiten aplicar estilos a partes específicas de un Shadow DOM, rompiendo el encapsulamiento y permitiendo el estilo desde fuera del componente.

Ejemplo de uso:

/* En el componente web */
<my-component part="header"></my-component>

/* En el CSS global del documento */
my-component::part(header) {
    background-color: #ff4500; /* Fondo naranja para la parte 'header' */
    color: white; /* Texto en blanco */
}

::before y ::after con counter()

La combinación de los pseudo-elementos ::before y ::after con la función counter() permite implementar contadores CSS avanzados para listas numeradas o procesos paso a paso.

Ejemplo de uso:

/* Define y resetea un contador */
ol {
    counter-reset: section;
}

/* Incrementa el contador y añade contenido antes de cada li */
ol li::before {
    counter-increment: section;
    content: "Sección " counter(section) ": ";
    font-weight: bold; /* Negrita */
    color: #0073e6; /* Color azul */
}

Consideraciones avanzadas

La aplicación combinada de estos pseudo-elementos modernos permite a los desarrolladores crear interfaces de usuario avanzadas y detalladas sin comprometer la estructura semántica del HTML, y sin necesidad de implementar soluciones de JavaScript adicionales. Mantener la separación de estilo y estructura no solo mejora la mantenibilidad del código, sino que también asegura una mejor rendimiento y accesibilidad.