Cargando...

Combinadores CSS

Ya dominas los selectores de tipo, class e id. Queda una habilidad clave: a veces no quieres «todos los párrafos», sino solo los que están dentro de una sección, solo el hijo directo de una lista, o lo que viene justo después del título. Eso lo hace el combinador.

¿Qué significa combinador?

Un combinador es un símbolo — o incluso solo un espacio — entre dos selectores. Le dice al navegador qué relación deben tener esas dos partes en el árbol HTML. La izquierda suele ser la «referencia»; la derecha es lo que realmente recibe color y tipografía.

Cuatro combinadores habituales

Primero memoriza los símbolos; después siente cada uno con un ejemplo corto.

📊 Combinadores CSS

Nombre Símbolo Significado sencillo Ejemplo
Descendiente espacio En cualquier profundidad dentro del ancestro article p
Hijo directo > Solo un nivel más abajo ul > li
Hermano adyacente + El vecino pegado siguiente h2 + p
Hermano general ~ Cualquier hermano posterior en el mismo nivel h2 ~ p

Descendiente — espacio entre dos selectores

Si escribes article p significa: cada <p> que esté en algún lugar dentro de <article>, por muy anidado que esté. Nietos y bisnietos también cuentan.

Descendiente — párrafos dentro de article

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

¿Cuándo conviene el descendiente?

Cuando quieres un aspecto común para «todo el texto de esta zona»: párrafos de un artículo, enlaces de un menú. Si hay mucha anidación y el estilo se desborda sin querer, pasa a >.

Hijo directo — >

Con > tomas solo un nivel más abajo. Lo que está dos niveles más profundo no pasa esta regla.

Hijo directo — solo ítems de primer nivel de la lista

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

Un ejemplo mental

Imagina un menú con un <li> exterior y, dentro, una lista anidada. Con .menu > li solo se estilan los exteriores. Si escribes .menu li (con espacio), también se colorean los anidados — a veces es lo que quieres, a veces un desastre.

Hermano adyacente — +

+ significa: el elemento que viene exactamente pegado después de la referencia, bajo el mismo padre, sin nada en medio.

Hermano adyacente — primer párrafo después del título

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

Un patrón habitual

Muchas páginas quieren la primera frase tras el título un poco más destacada. Con h2 + p atrapas ese vecino; no hace falta pegar una class a cada párrafo.

Hermano general — ~

~ también pide hermanos, pero no solo el vecino pegado: cualquier hermano posterior que encaje con el segundo selector.

Hermano general — párrafos después del título

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

Diferencia entre + y ~ en una frase

  • h2 + p → solo el párrafo pegado después de h2
  • h2 ~ p → cada p hermano que venga después de ese h2
    Si entre el título y el párrafo se sienta un div, + no sirve para ese párrafo; ~ aún puede alcanzar párrafos hermanos posteriores.

¿Cuál elegir?

  • Todos los elementos de este tipo dentro de una zona → descendiente (espacio)
  • La anidación provoca estilos de más → hijo directo (>)
  • Solo el vecino de un paso (título → primer párrafo) → +
  • Varios hermanos tras una marca, aspecto compartido → ~
    Mantén la cadena corta. Un selector muy largo se rompe pronto al cambiar el HTML.

Pruébalo tú

  1. Crea un <article> con <h2>, un <p>, un <div> con un <p> dentro, y luego otro <p> después del div.
  2. Pon la regla article p { color: #334155; } — deben colorearse ambos párrafos del article.
  3. Cámbiala a article > p { color: #0f766e; } — solo hijos directos; no el p dentro del div.
  4. Añade h2 + p { font-weight: bold; } — solo el párrafo pegado al título se pone en negrita.
  5. Si quieres: prueba h2 ~ p { max-width: 36rem; } — todos los párrafos hermanos tras el título.

Errores frecuentes

  • Usar descendiente donde querías hijo directo — el widget anidado también hereda el estilo
  • Creer que h2 + p «salta» un elemento intermedio — no salta; adyacente significa pegado
  • Leer el combinador al revés — el estilo llega al lado derecho
  • Poner una coma en vez de combinador (h2, p es «título y párrafo», no «párrafo después del título»)
  • Confundir ~ con «vecino pegado» — ~ significa más adelante en el mismo nivel, no necesariamente la puerta de al lado

Resumen

  • El combinador fija la relación de dos selectores en el HTML
  • Espacio = descendiente (cualquier profundidad); > = solo hijo directo
  • + = hermano pegado; ~ = cualquier hermano posterior
  • El estilo llega al selector de la derecha
  • Elige el símbolo más estrecho que aún diga lo que quieres
  • En una página pequeña cambia el espacio por > y + por ~ y mira el resultado

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial