Agrupar con :is() y :where() — CSS más limpio y predecible

• :is() agrupa varios selectores y aplica el mismo estilo: aquí coloreamos de azul todos los <h1>, <h2> y <h3> sin repetir reglas.
• :where() también agrupa, pero con peso cero de especificidad. Así podemos dar estilos base a <p> y <li> sin que interfieran en prioridades más altas.
• El resultado: un CSS más compacto, menos repetitivo y con jerarquía clara.

HTML
<div class="demo">
  <h2>Título de sección</h2>
  <p>Este párrafo recibe estilo gracias a <code>:where()</code></p>
  <ul>
    <li>Elemento de lista uno</li>
    <li>Elemento de lista dos</li>
  </ul>
</div>

CSS
.demo {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: #f9f9f9;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.demo :is(h1,h2,h3) {
  color: #3498db;
  font-family: sans-serif;
  margin: 0;
}

.demo :where(p,li) {
  color: #555;
  line-height: 1.5;
}

.demo ul {
  padding-left: 1.2rem;
}

.demo li::before {
  content: "✔ ";
  color: #2ecc71;
}