Selectores

Un selector es la parte de una regla CSS que indica a qué elementos se aplican los estilos. Dominarlos es la diferencia entre escribir CSS que funciona y CSS que pelea contigo.

Selectores básicos

Selector de tipo

Selecciona todos los elementos de ese tag HTML:

p {
  line-height: 1.6;
}

h2 {
  font-size: 1.5rem;
}

Selector de clase

Selecciona todos los elementos con esa clase. Una clase puede usarse en múltiples elementos:

.destacado {
  background-color: yellow;
}

<p class="destacado">Este está resaltado</p>
<span class="destacado">Este también</span>

Selector de ID

Selecciona el elemento con ese ID único. Un ID solo debe aparecer una vez por página:

#cabecera {
  background-color: navy;
  color: white;
}

<header id="cabecera">...</header>

En la práctica moderna, los IDs se usan poco en CSS. Las clases son más flexibles y reutilizables.

Selectores de atributo

Seleccionan elementos según el valor de sus atributos:

/* Todos los inputs de tipo texto */
input[type="text"] {
  border: 1px solid gray;
}

/* Todos los enlaces que abren en nueva pestaña */
a[target="_blank"] {
  color: teal;
}

Pseudoclases

Las pseudoclases representan estados de un elemento:

a:hover {
  text-decoration: underline;
}

button:focus {
  outline: 2px solid blue;
}

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

li:nth-child(2n) {
  background: #f0f0f0; /* filas pares */
}

Pseudoelementos

Los pseudoelementos crean partes virtuales de un elemento:

p::first-line {
  font-weight: bold;
}

.card::before {
  content: '★ ';
  color: gold;
}

.card::after {
  content: '';
  display: block;
  height: 2px;
  background: black;
}

Combinadores

Permiten seleccionar elementos según su relación con otros:

/* Descendiente: cualquier p dentro de article */
article p {
  margin-bottom: 1em;
}

/* Hijo directo: solo p directamente dentro de section */
section > p {
  font-size: 1.1rem;
}

/* Hermano adyacente: h2 seguido inmediatamente de p */
h2 + p {
  margin-top: 0;
}

/* Hermanos generales: todos los p después de h2 */
h2 ~ p {
  color: gray;
}

Especificidad

Cuando varias reglas afectan al mismo elemento, gana la más específica:

p { color: blue; }         /* especificidad: 0,0,1 */
.texto { color: green; }   /* especificidad: 0,1,0 — gana */
#principal { color: red; } /* especificidad: 1,0,0 — gana sobre todo */

Cuando dos reglas tienen la misma especificidad, gana la que viene después en el CSS.

En la siguiente lección exploramos el modelo de caja: el sistema que controla el tamaño y el espacio de cada elemento.