Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Pseudoclases y Pseudoelementos en CSS

Las pseudoclases y pseudoelementos permiten aplicar estilos según el estado de un elemento o a partes específicas de él. Con ellos puedes, por ejemplo, cambiar el color de un enlace al pasar el ratón o estilizar la primera letra de un párrafo. Estas herramientas hacen que las páginas web se sientan más dinámicas y refinadas.

Pseudoclases: estilo según el estado

Las pseudoclases se escriben con un solo dos puntos (:) y permiten seleccionar elementos según su estado, interacción del usuario o posición en el documento.

Pseudoclases para enlaces

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: red; }
a:active  { color: green; }

Orden recomendado: :link → :visited → :hover → :active (pista mnemotécnica: LoVe HAte).

Nota: Estas pseudoclases solo se aplican a enlaces reales (<a href="...">).

Pseudoclases dinámicas

button:hover  { background-color: lightblue; }
input:focus   { border-color: orange; }
  • :hover: cuando el ratón pasa por encima.
  • :focus: cuando el elemento recibe foco.
  • :active: mientras se pulsa (clic o teclado).

Pseudoclases estructurales

Permiten seleccionar elementos según su posición dentro del HTML:

ul li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #eee; }
li:not(.especial) { color: blue; }
  • :first-child: primer hijo de su contenedor.
  • :last-child: último hijo.
  • :nth-child(n): el hijo número n, o pares/impares.
  • :not(selector): todo lo que no coincida.

Pseudoclases modernas

CSS moderno ha introducido pseudoclases más potentes:

:is(h1, h2, h3).destacado { color: red; }
:where(.menu, .footer) a { text-decoration: none; }
div:has(p) { border: 1px solid black; }
  • :is(): agrupa selectores múltiples.
  • :where(): como :is(), pero sin peso de especificidad.
  • :has(): selecciona elementos que contienen otros (soporte creciente en navegadores).

Pseudoelementos: estilo a partes de un elemento

Se escriben con doble dos puntos (::) y permiten aplicar estilo a partes internas de un elemento.

Clásicos: ::first-letter y ::first-line

p::first-letter { font-size: 2em; color: red; }
p::first-line  { font-weight: bold; }

Nota: Solo aplican a elementos de bloque como <p> o <div>.

::before y ::after

Generan contenido antes o después del contenido real de un elemento:

h2::before {
    content: "★ ";
    color: gold;
}

Pseudoelementos modernos

li::marker      { color: red; }
::selection      { background: yellow; color: black; }
  • ::marker: estiliza los marcadores de listas.
  • ::selection: estiliza el texto seleccionado por el usuario.

Tip útil

html {
    scroll-behavior: smooth;
}

Esto permite que los enlaces internos (<a href="#id">) hagan un desplazamiento suave.

Buenas prácticas

Valores universales: Las pseudoclases y pseudoelementos pueden usar initial, inherit y unset en sus propiedades asociadas.

Evita combinaciones excesivas de pseudoclases que dificulten el mantenimiento.

Revisa el soporte: pseudoclases como :has() todavía no funcionan en todos los navegadores.

Usa pseudoelementos con moderación: especialmente cuando generas contenido visual, asegúrate de no romper la accesibilidad.

Prueba tu CSS: inspecciona con las herramientas del navegador para confirmar que los estilos se aplican según lo esperado.

TOP