En esta página

Selectores avanzados

12 min lectura TextoCap. 1 — Base de CSS

Selectores simples

Los selectores simples son la base de CSS:

  • Tipo: p, h1, div — Selecciona por etiqueta
  • Clase: .card, .active — Selecciona por clase
  • ID: #header, #main — Selecciona por ID (único)
  • Universal: * — Selecciona todos los elementos

Combinadores

Los combinadores permiten seleccionar elementos basados en su relacion con otros:

Combinador Sintaxis Selecciona
Descendiente div p Todos los p dentro de div
Hijo directo div > p Solo p hijos directos de div
Hermano adyacente h2 + p El p inmediatamente despues de h2
Hermano general h2 ~ p Todos los p hermanos despues de h2

Pseudo-clases

Las pseudo-clases seleccionan elementos en un estado especial:

  • :hover — Al pasar el mouse
  • :focus — Cuando tiene foco
  • :first-child — Primer hijo
  • :nth-child(n) — Enesimo hijo
  • :not(.clase) — Negacion

Pseudo-elementos

Los pseudo-elementos permiten estilizar partes especificas de un elemento:

  • ::before — Contenido antes del elemento
  • ::after — Contenido despues del elemento
  • ::first-line — Primera linea de texto
  • ::placeholder — Texto placeholder de inputs

En la siguiente leccion aprenderemos el Box Model de CSS.

Práctica

  1. Usa combinadores: Crea una lista <ul> con items anidados y aplica estilos diferentes usando el combinador hijo directo (>) y el combinador descendiente para ver la diferencia.
  2. Estiliza con pseudo-clases: Construye una lista de 6 elementos y usa :nth-child(odd) para colorear las filas alternas. Anade un efecto :hover a cada item.
  3. Agrega contenido con pseudo-elementos: Usa ::before para insertar un icono o simbolo delante de cada enlace dentro de un <nav>.
Sabías que?
Los selectores de atributo como [type="email"] permiten seleccionar elementos por sus atributos HTML. Son muy útiles para formularios.
css
/* Combinador descendiente */
nav a { color: #333; }

/* Hijo directo */
ul > li { list-style: disc; }

/* Hermano adyacente */
h2 + p { font-size: 1.1rem; }

/* Pseudo-clases */
a:hover { color: #0066cc; }
input:focus { outline: 2px solid #0066cc; }
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-elementos */
.quote::before {
  content: open-quote;
  font-size: 2rem;
}