:is() y :where() en CSS

El mismo agrupamiento; difieren en una sola cosa: qué hacen con la especificidad.

/* una regla en lugar de seis */
.prose :is(h1, h2, h3) {
  text-wrap: balance;
  margin-block: 1.5em 0.5em;
}

/* especificidad cero, así que un componente la anula con una clase */
:where(.prose) :where(a) {
  color: #2b6cb0;
  text-decoration-thickness: 1px;
}

.prose a.button { color: white; }

/* :not() también acepta una lista */
button:not(.link, .ghost) { border: 1px solid currentColor; }

Cómo funciona

1. :is() toma la especificidad de su argumento más específico.
2. :where() siempre cuenta como cero, perfecto para valores por defecto.
3. Ambos evitan que una lista larga de selectores repita su propio prefijo.

Palabras clave y builtins usados aquí

• border
• color
• em
• px

El intento, en números

Líneas

16

Caracteres a escribir

391

Tokens

79

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 56 segundos.

Escribe este fragmento

Paso 2 de 3 en Selectores que hacen preguntas; paso 9 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →