Il selettore :is() è una potente aggiunta al CSS perché progettata per semplificare la scrittura di gruppi di selettori complessi. Consente a noi sviluppatori di applicare stili a diversi elementi in un'unica definizione, in modo pulito e leggibile, evitando ripetizioni e riducendo la complessità del codice. Vediamone la sintassi.

elemento:is(selettore1, selettore2, ...)

Ciò implica che in presenza di un elemento, possiamo scrivere una sola volta le proprietà CSS, ed applicarle sulla base delle sue varianti. Come per i casi seguenti

h1:is(.title, .header, .primary) {
    color: red;
}

:is(section, div) > p {
    color: gray;
}

Tutti gli h1 con la classe .title, .header o .primary avranno il testo rosso. Inoltre possiamo continuare ad utilizzare tutte le regole che già conosciamo, come nel secondo esempio, dove riusciamo a definire il colore di un testo all'interno di un elemento p che sia primo figlio di un div o section.

In conclusione, per capire le reali potenzialità, guardiamo la scomposizione del primo esempio, per renderci effettivamente conto di quando sia impattante a livello di leggibilità.

/* prima */
h1.title, h1.header, h1.primary {
    color: red;
}
/* dopo */
h1:is(.title, .header, .primary) {
    color: red;
}