Selectores lógicos y relacionales CSS

Guía de lógica y relaciones CSS

Combina condiciones sin perder de vista el sujeto

Distingue OR, AND y exclusión, compara la especificidad especial de las pseudoclases funcionales y aprende a leer selectores relativos.

Volver al playground

Cuatro ideas antes de combinar selectores

La misma lista de condiciones puede cambiar de significado y de peso según dónde aparezcan las comas y qué pseudoclase las contenga.

A, B

La coma expresa OR

Una lista coincide si al menos una rama coincide. Cada selector complejo conserva su propia tupla de especificidad.

A.class

Un compuesto expresa AND

Los selectores simples escritos sin combinador deben cumplirse sobre el mismo elemento y suman sus aportaciones.

:is() · :where()

Mismas coincidencias, distinto peso

:is() toma el argumento más específico; :where() y todos sus argumentos aportan cero.

E:has(relative)

El sujeto permanece fuera de :has()

E es el elemento seleccionado. Los argumentos relativos se evalúan tomando E como ancla y pueden empezar con un combinador.

Composición con OR y AND

Compara la unión de ramas independientes con varias condiciones exigidas sobre un único elemento.

Lista de selectores

A, B

Selecciona un elemento cuando coincide con al menos una rama de la lista separada por comas.

Especificidad(0, 0, 1) · (0, 1, 0)

Comportamiento importante

Las ramas son selectores complejos independientes y pueden seleccionar tipos de elementos diferentes.
La especificidad se calcula por rama; no existe una única tupla que represente toda la lista en abstracto.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 0, 1) · (0, 1, 0)

article, .notice

HTML

<section>
→Coincide:   <article>Coincide</article>
  <div>No coincide</div>
→Coincide:   <p class="notice">Coincide</p>
</section>

SelectorEspecificidad(0, 0, 1) · (0, 1, 0)

button, [role="status"]

HTML

<div>
→Coincide:   <button>Coincide</button>
  <a href="#docs">No coincide</a>
→Coincide:   <output role="status">Coincide</output>
</div>

Errores conceptuales habituales

Una rama inválida en una lista normal invalida la lista completa y su regla CSS.
La coma no exige que un elemento cumpla ambas ramas; eso sería una composición AND.

Consultar la definición completa

Selector compuesto

A.class[attr]

Selecciona un mismo elemento que cumple simultáneamente todos los selectores simples escritos sin combinador.

Especificidad(0, 2, 1)

Comportamiento importante

Cada clase, atributo, tipo o pseudoclase del compuesto añade su propia condición.
La especificidad suma todas las contribuciones, aunque varias condiciones sean del mismo tipo.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 2, 0)

.card.featured

HTML

<section>
→Coincide:   <article class="card featured">Coincide</article>
  <article class="card">No coincide</article>
  <div class="featured">No coincide</div>
</section>

SelectorEspecificidad(0, 2, 1)

button.primary[aria-pressed="true"]

HTML

<div>
→Coincide:   <button class="primary" aria-pressed="true">Coincide</button>
  <button class="primary" aria-pressed="false">No coincide</button>
  <a class="primary" aria-pressed="true">No coincide</a>
</div>

Errores conceptuales habituales

Introducir un espacio deja de expresar AND sobre el mismo elemento y crea una relación de descendencia.
Una coma cambiaría la intersección por una unión de ramas independientes.

Consultar la definición completa

Pseudoclases de combinación lógica

:is(), :where() y :not() aceptan listas, pero no comparten el mismo significado ni la misma especificidad.

:is()

:is(A, B)

Coincide cuando el elemento satisface al menos un selector de su lista de argumentos.

Especificidad(0, 1, 0)

Comportamiento importante

Usa una lista forgiving: descarta argumentos inválidos si todavía queda alguno válido.
Su especificidad se sustituye por la del argumento más específico, coincida o no ese argumento con el elemento concreto.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 1)

:is(article, aside).featured

HTML

<section>
→Coincide:   <article class="featured">Coincide</article>
→Coincide:   <aside class="featured">Coincide</aside>
  <section class="featured">No coincide</section>
</section>

SelectorEspecificidad(0, 1, 1)

.toolbar :is(a, button)

HTML

<nav class="toolbar">
→Coincide:   <a href="#guide">Coincide</a>
  <span>No coincide</span>
→Coincide:   <button>Coincide</button>
</nav>

Errores conceptuales habituales

No aporta simplemente una unidad de pseudoclase; puede heredar incluso el peso de un ID del argumento.
Los pseudoelementos no son argumentos válidos dentro de :is().

Soporte relevante

Este estado Baseline corresponde a :is(), incluida su lista forgiving. El navegador actual se comprueba aparte en el playground.

Consultar la definición completa

:where()

:where(A, B)

Coincide con los mismos elementos que :is() para la misma lista de argumentos.

Especificidad(0, 0, 0)

Comportamiento importante

:where() y todos sus argumentos aportan siempre una especificidad de (0, 0, 0).
Resulta útil para expresar contexto o defaults que deben seguir siendo fáciles de sobrescribir.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 1, 0)

:where(article, aside).featured

HTML

<section>
→Coincide:   <article class="featured">Coincide</article>
→Coincide:   <aside class="featured">Coincide</aside>
  <section class="featured">No coincide</section>
</section>

SelectorEspecificidad(0, 1, 0)

.content :where(p, blockquote)

HTML

<article class="content">
→Coincide:   <p>Coincide</p>
→Coincide:   <blockquote>Coincide</blockquote>
  <aside>No coincide</aside>
</article>

Errores conceptuales habituales

Especificidad cero no significa que la regla pierda siempre: la cascada también considera origen, capas, importancia y orden.
Solo se anula el peso de :where(); los selectores escritos fuera de ella siguen contando.

Soporte relevante

Este estado Baseline corresponde a :where() y su comportamiento de especificidad cero.

Consultar la definición completa

:not()

:not(A, B)

Selecciona el sujeto cuando no coincide con ninguno de los selectores indicados en el argumento.

Especificidad(0, 1, 0)

Comportamiento importante

Selectors Level 4 permite una lista de selectores complejos y combinaciones anidadas como :not(:has(...)).
Su especificidad es la del argumento más específico, igual que :is(), sin añadir una unidad propia.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 2, 0)

.card:not(.archived, :has(.locked))

HTML

<section>
→Coincide:   <article class="card">Coincide</article>
  <article class="card archived">No coincide</article>
  <article class="card"><span class="locked">Restringido</span></article>
</section>

SelectorEspecificidad(0, 0, 2)

section:not(:has(h2, h3))

HTML

<main>
→Coincide:   <section>
    <p>Coincide</p>
  </section>
  <section>
    <h2>No coincide</h2>
  </section>
</main>

Errores conceptuales habituales

:not() no elimina ni oculta elementos; solo decide si el sujeto coincide con la regla.
El orden de :not(:has(...)) no es intercambiable con :has(:not(...)); expresan condiciones diferentes.

Soporte relevante

Este estado Baseline representa la forma de Selectors Level 4 que admite listas dentro de :not().

Consultar la definición completa

Relaciones con :has()

Selecciona un sujeto según descendientes o hermanos que coinciden con selectores relativos anclados en él.

:has()

:has(relative selector)

Selecciona el elemento sujeto cuando al menos un selector relativo coincide tomando ese elemento como ancla.

Especificidad(0, 1, 0)

Comportamiento importante

Los argumentos pueden empezar con >, + o ~ para comprobar hijos o hermanos respecto al sujeto.
Su especificidad se sustituye por la del argumento relativo más específico.

Ejemplos de selector y HTML

SelectorEspecificidad(0, 2, 0)

.card:has(> :is(.badge, .media))

HTML

<section>
→Coincide:   <article class="card">
    <span class="badge">Coincide</span>
  </article>
  <article class="card"><p>No coincide</p></article>
→Coincide:   <aside class="card">
    <span class="media">Coincide</span>
  </aside>
</section>

SelectorEspecificidad(0, 0, 2)

dt:has(+ dt)

HTML

<dl>
→Coincide:   <dt>Coincide</dt>
  <dt>No coincide</dt>
  <dd>CSS</dd>
  <dt>No coincide</dt>
  <dd>HTML</dd>
</dl>

Errores conceptuales habituales

:has() no puede anidarse dentro de otro :has() y sus argumentos no admiten pseudoelementos en Selectors Level 4.
Conviene acotar el sujeto a un componente concreto en lugar de consultar ancestros muy amplios sin necesidad.

Soporte relevante

Este estado Baseline corresponde a :has(). Al ser una incorporación posterior, se muestra separado de los selectores básicos.

Consultar la definición completa

Preview del selector

Guía principal de selectores

Curso avanzado

La coma expresa OR

Un compuesto expresa AND

Mismas coincidencias, distinto peso

El sujeto permanece fuera de :has()

Lista de selectores

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Selector compuesto

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

:is()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

:where()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

:not()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante

:has()

Comportamiento importante

Ejemplos de selector y HTML

Errores conceptuales habituales

Soporte relevante