Guía Completa de Selectores CSS

SELECTORES SIMPLES

1. Selector Universal (*)

Qué hace: Selecciona todos los elementos de la página
* {
  margin: 0; /* Quita el margen a TODO */
}

2. Selector de Elemento

Qué hace: Selecciona todos los elementos de un tipo específico
p {
  color: blue; /* Todos los párrafos en azul */
}

3. Selector de Identificador (#)

Qué hace: Selecciona el elemento con un ID específico (debe ser único)
#encabezado {
  font-size: 24px; /* Solo el elemento con id="encabezado" */
}

4. Selector de Clase (.)

Qué hace: Selecciona todos los elementos con una clase específica
.destacado {
  background-color: yellow; /* Todos los elementos con class="destacado" */
}

5. Selector de Atributo ([ ])

Qué hace: Selecciona elementos que tienen un atributo específico o con un valor concreto
input[type="email"] {
  border: 2px solid green; /* Solo inputs de tipo email */
}
/* Empieza con "https" */
a[href^="https"] {
  color: green;
}
/* Termina con ".png" */
img[src$=".png"] {
  border: 1px solid gray;
}
/* Contiene "box" */
div[class*="box"] {
  padding: 10px;
}

6. Pseudoelementos (::)

Qué hace: Selecciona una parte específica de un elemento (no un elemento completo)
p::first-line {
  font-weight: bold; /* Solo la primera línea de cada párrafo */
}
h1::before {
  content: "→ "; /* Añade contenido antes del h1 */
}

7. Pseudoclases (:)

Qué hace: Selecciona elementos en un estado específico
a:hover {
  color: red; /* Enlaces cuando pasas el ratón sobre ellos */
}
li:first-child {
  font-weight: bold; /* El primer elemento li de una lista */
}
/* Selecciona el 3er elemento hijo */
li:nth-child(3) {
  color: red;
}
/* Elementos pares (2, 4, 6...) */
li:nth-child(even) {
  background: lightgray;
}
/* Elementos impares (1, 3, 5...) */
li:nth-child(odd) {
  background: white;
}

SELECTORES COMPUESTOS (COMBINADORES)

1. Selector de Descendiente (espacio)

Qué hace: Selecciona elementos que están dentro de otro (en cualquier nivel)
div p {
  color: green; /* Todos los <p> que estén dentro de un <div> */
}

2. Selector de Hijo (>)

Qué hace: Selecciona solo los hijos directos (no nietos)
ul > li {
  list-style: square; /* Solo los <li> que son hijos directos de <ul> */
}

3. Selector de Adyacente (+)

Qué hace: Selecciona el elemento inmediatamente después de otro
h2 + p {
  font-size: 18px; /* El primer <p> que venga justo después de un <h2> */
}

4. Selector de Hermanos Generales (~)

Qué hace: Selecciona todos los hermanos que vienen después (no solo el inmediato)
h2 ~ p {
  color: gray; /* Todos los <p> que vengan después de un <h2> (mismo nivel) */
}

5. Selector de Grupo (,)

Qué hace: Aplica los mismos estilos a múltiples selectores
h1, h2, h3 {
  font-family: Arial; /* Los tres tipos de títulos con la misma fuente */
}

Ejemplo Completo

* { margin: 0; }
p { color: black; }
#contenedor { padding: 20px; }
.intro { font-weight: bold; }
[class] { border: 1px solid; }
p::first-letter { font-size: 2em; }
li:hover { background: yellow; }
div p { margin: 10px; }
ul > li { list-style: circle; }
h2 + p { color: red; }
h2 ~ p { font-style: italic; }
h2, p { font-family: Arial; }