Logo Code Cats Studio

Selectores y pseudo‑clases

Domina los selectores, combinadores, pseudo‑clases y pseudo‑elementos con ejemplos claros y prácticos.

2. Selectores y pseudo‑clases

Repasamos selectores básicos y combinadores, pseudo‑clases de interacción y estructura, y pseudo‑elementos para crear decoradores y efectos sin HTML extra.

2.1 Selectores básicos y combinadores

Resumen

  • Básicos: elemento, clase, id, atributo.
  • Combinadores: descendiente (espacio), hijo (>), hermano adyacente (+), hermano general (~).
  • Especificidad y cascada: id > clase/atributo/pseudo‑clase > elemento/pseudo‑elemento.

Objetivo: estilizar .card > h3 sin afectar .card h3 más profundo.

H3 hijo directo

H3 anidado (no debe cambiar)

CSS clave:

/* Solo el h3 hijo directo de .card */
.card > h3 { color: var(--accent); }

/* Cualquier h3 dentro de .card (incluye profundos) */
/* .card h3 { color: orange; }  // Evitar si solo quieres el hijo directo */

/* Especificidad: .card > h3 gana sobre h3 simple */

2.2 Pseudo‑clases (hover, focus, active, nth-child)

Tipos

  • Interacciones: :hover, :focus, :active, :disabled
  • Estructurales: :first-child, :last-child, :nth-child(), :not()

Enlaces accesibles con :hover y :focus:

Abrir recurso Descargar guía 
.link {
  background: var(--primary);
}
.link:hover { background: var(--accent); color: var(--primary); }
.link:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.link:active { transform: translateY(0); }

Estados de formulario:

input:focus, button:focus { outline: 3px solid var(--accent); }
button:hover { background: var(--accent); color: var(--primary); }
button:disabled { opacity: .6; cursor: not-allowed; }

Listas alternadas con :nth-child(odd/even):

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5
.lista-alt li:nth-child(odd)  { background: rgba(255,255,255,0.10); }
.lista-alt li:nth-child(even) { background: rgba(255,255,255,0.06); }

2.3 Pseudo‑elementos (::before, ::after, ::first-line)

Idea clave: generan contenido virtual. Requieren content. Útiles para iconos, decoraciones y efectos.

::before como icono en título:

Título decorado

.titulo::before {
  content: "★";
  /* posicionamiento y estilos */
}

Subrayado animado con ::after en enlaces:

Ver documentación 
.enlace::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0; background: var(--accent);
  transition: width .3s ease;
}
.enlace:hover::after, .enlace:focus::after { width: 100%; }

::first-line aplica estilo a la primera línea renderizada de un párrafo (según el ancho disponible).

Esta es una línea de texto un poco más larga para ilustrar el pseudo‑elemento ::first-line. Cambia el ancho de la ventana y observa el efecto en la primera línea. 

.first-line-demo::first-line {
  font-weight: 700;
  color: var(--accent);
}

Micropráctica

Marca “Nuevo” en tarjetas con ::before sin modificar el HTML interno.

Tarjeta A

Contenido breve.

Tarjeta B

Sin “Nuevo”.

.card.nuevo::before {
  content: "Nuevo";
  position: absolute; top: 12px; right: -14px; transform: rotate(45deg);
  background: #ff5c7c; color: #fff; padding: 4px 24px; font-weight: 700;
}

Checklist de comprensión