BaselineLab
0Apoyar

Combinadores y relaciones

Compara relaciones de profundidad y hermandad sobre tres escenarios HTML y comprueba exactamente qué elementos selecciona cada combinador.

Guía

Preguntar a la IA

Combinadores y relaciones

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Selector actual.article p
Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

Selecciona los objetivos situados a cualquier profundidad dentro del contenedor.

Preview del selector

Relaciones en un artículo

Introducción directa.

Párrafo directo después de la introducción.

Párrafo final del artículo.

HTML
<article class="article" aria-label="Estructura de un artículo sobre combinadores">
  <h3>Relaciones en un artículo</h3>
  <p class="lead">Introducción directa.</p>
  <p>Párrafo directo después de la introducción.</p>
  <aside class="note">
    <p>Párrafo anidado dentro de una nota.</p>
  </aside>
  <p>Párrafo final del artículo.</p>
</article>
CSS
.article p {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

Guía de combinadores CSS

Entiende cómo se relacionan los elementos

Distingue profundidad, parentesco directo y orden entre hermanos sin confundir el elemento de referencia con el elemento seleccionado.

Volver al playground

Cómo leer una relación

Un combinador conecta dos selectores compuestos y exige que sus elementos mantengan una relación concreta en el árbol del documento.

A combinator B

La parte derecha es el objetivo

En A combinador B, la regla selecciona B. A aporta el contexto necesario para que B pueda coincidir.

A B · A > B

Profundidad o parentesco directo

El espacio admite cualquier número de niveles; > exige que A sea el padre inmediato de B.

A + B · A ~ B

Mismo padre y orden posterior

+ exige el siguiente hermano elemento; ~ admite otros hermanos intermedios, pero nunca busca hacia atrás.

Árbol y profundidad

Compara cualquier descendiente con los hijos que dependen directamente de un contenedor.

Descendiente

E F

Selecciona B cuando se encuentra en cualquier nivel dentro de un ancestro A.

Especificidad(0, 0, 2)
Comportamiento importante
  • El combinador es uno o varios espacios CSS entre dos selectores compuestos.
  • La relación puede atravesar cualquier cantidad de elementos intermedios.
Ejemplos de selector y HTML
SelectorEspecificidad(0, 1, 1)
.article p
HTML
<article class="article">
Coincide:   <p>Coincide</p>
  <section>
Coincide:     <p>Coincide</p>
  </section>
</article>
<p>No coincide</p>
SelectorEspecificidad(0, 1, 1)
.menu a
HTML
<nav class="menu">
Coincide:   <a>Coincide</a>
  <span>
Coincide:     <a>Coincide</a>
  </span>
</nav>
<a>No coincide</a>
Errores conceptuales habituales
  • Tratar el espacio como formato opcional cambia el significado del selector.
  • No equivale a hijo directo: también encuentra nietos y descendientes más profundos.
Consultar la definición completaAbre en una pestaña nueva

Hijo directo

E > F

Selecciona B únicamente cuando su padre elemento inmediato coincide con A.

Especificidad(0, 0, 2)
Comportamiento importante
  • Los espacios alrededor de > son opcionales y no alteran la relación.
  • Los descendientes situados a dos o más niveles quedan fuera de la coincidencia.
Ejemplos de selector y HTML
SelectorEspecificidad(0, 1, 1)
.article > p
HTML
<article class="article">
Coincide:   <p>Coincide</p>
  <section>
    <p>No coincide</p>
  </section>
</article>
SelectorEspecificidad(0, 1, 1)
.menu > a
HTML
<nav class="menu">
Coincide:   <a>Coincide</a>
  <span>
    <a>No coincide</a>
  </span>
Coincide:   <a>Coincide</a>
</nav>
Errores conceptuales habituales
  • No selecciona el primer hijo: para la posición se necesitan pseudoclases estructurales.
  • Que B se vea dentro de A no garantiza que A sea su padre directo en el DOM.
Consultar la definición completaAbre en una pestaña nueva

Orden entre hermanos

Compara el hermano elemento inmediato con todos los hermanos coincidentes que aparecen después.

Hermano adyacente

E + F

Selecciona B cuando comparte padre con A y es el siguiente hermano elemento.

Especificidad(0, 0, 2)
Comportamiento importante
  • Los nodos de texto y comentarios entre ambos no rompen la adyacencia de elementos.
  • Selecciona B, no el elemento A que sirve de referencia.
Ejemplos de selector y HTML
SelectorEspecificidad(0, 0, 2)
h2 + p
HTML
<section>
  <h2>CSS</h2>
Coincide:   <p>Coincide</p>
  <p>No coincide</p>
</section>
SelectorEspecificidad(0, 1, 1)
.current + a
HTML
<nav>
  <a class="current">Actual</a>
Coincide:   <a>Coincide</a>
  <span>
    <a>No coincide</a>
  </span>
</nav>
Errores conceptuales habituales
  • La cercanía visual creada por CSS no importa; se evalúa el orden del DOM.
  • Solo puede coincidir un B por cada A porque exige el hermano elemento inmediato.
Consultar la definición completaAbre en una pestaña nueva

Hermanos posteriores

E ~ F

Selecciona cada B posterior a A cuando ambos comparten el mismo padre.

Especificidad(0, 0, 2)
Comportamiento importante
  • Puede haber otros elementos entre A y cada B coincidente.
  • La relación es direccional: nunca selecciona hermanos anteriores a A.
Ejemplos de selector y HTML
SelectorEspecificidad(0, 0, 2)
h2 ~ p
HTML
<section>
  <h2>CSS</h2>
Coincide:   <p>Coincide</p>
  <aside>Nota</aside>
Coincide:   <p>Coincide</p>
</section>
SelectorEspecificidad(0, 1, 1)
.current ~ a
HTML
<nav>
  <a class="current">Actual</a>
Coincide:   <a>Coincide</a>
  <span>
    <a>No coincide</a>
  </span>
Coincide:   <a>Coincide</a>
</nav>
Errores conceptuales habituales
  • No selecciona todos los hermanos, sino solo los B posteriores que cumplen el selector derecho.
  • No alcanza descendientes de un hermano intermedio porque exige compartir padre con A.
Consultar la definición completaAbre en una pestaña nueva