Nuovi selettori di pseudo-classi funzionali CSS :is() e :where()

Queste aggiunte apparentemente piccole alla sintassi dei selettori CSS avranno un grande impatto.

Adam Argyle

Quando scrivi CSS, a volte potresti ritrovarti con elenchi di selettori lunghi per avere come target più elementi con le stesse regole di stile. Ad esempio, se vuoi modificare il colore di qualsiasi tag <b> trovato all'interno di un elemento di intestazione, puoi scrivere:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

In alternativa, puoi utilizzare :is() e migliorare la leggibilità evitando un selettore lungo:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

La leggibilità e la praticità dei selettori più brevi sono solo alcuni dei vantaggi che :is() e :where() offrono al CSS. In questo post scoprirai la sintassi e il valore di questi due pseudo-selettori funzionali.

Compatibilità del browser

:is()

:where()

Incontra :is() e :where()

Si tratta di selettori di pseudo-classi funzionali. Tieni presente il () alla fine e il modo in cui iniziano con :. Pensa a queste come a chiamate di funzioni dinamiche di runtime che fanno corrispondere gli elementi. Quando scrivi CSS, ti consentono di raggruppare gli elementi in mezzo, all'inizio o alla fine di un selettore. Possono anche modificare la specificità, dandoti la possibilità di annullarla o aumentarla.

Raggruppamento dei selettori

:where() può fare tutto ciò che può fare :where() in materia di raggruppamento.:is() Ciò include l'utilizzo ovunque nel selettore, il loro nidificazione e l'accatastamento. La piena flessibilità del CSS che già conosci e apprezzi. Ecco alcuni esempi:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Ciascuno degli esempi di selettori riportati sopra dimostra la flessibilità di queste due pseudoclassi funzionali. Per trovare le aree del codice che potrebbero trarre vantaggio da :is() o :where(), cerca i selettori con più virgole e ripetizione del selettore.

Utilizzo di selettori semplici e complessi con :is()

Per ripassare i selettori, consulta il modulo sui selettori su Impara CSS. Ecco alcuni esempi di selettori semplici e complessi per illustrare la funzionalità:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Finora, :is() e :where() sono sintatticamente intercambiabili. È arrivato il momento di esaminare le differenze.

La differenza tra :is() e :where()

In termini di specificità, :is() e :where() sono molto diversi. Per approfondire la specificità, consulta il modulo sulla specificità su Impara CSS.

In breve

• :where() non ha alcuna specificità.
  :where() comprime tutta la specificità nell'elenco dei selettori passati come parametri funzionali. Si tratta di una funzionalità di selezione unica nel suo genere.
• :is() assume la specificità del suo selettore più specifico.
  :is(a,div,#id) ha un punteggio di specificità di un ID, 100 punti.

L'utilizzo del selettore di specificità più elevato nell'elenco è stato un problema solo quando ero troppo entusiasta del raggruppamento. Ho sempre potuto migliorare la leggibilità spostando il selettore ad alta specificità nel suo selettore, dove non avrebbe avuto un impatto così elevato. Ecco un esempio di ciò che intendo:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Con :where(), sto aspettando di vedere le librerie offrire versioni senza specificità. La concorrenza per la specificità tra gli stili degli autori e quelli delle librerie potrebbe finire. Non ci sarebbero specifiche con cui competere quando si scrive CSS. Il CSS sta lavorando a una funzionalità di raggruppamento come questa da un po' di tempo, è qui e si tratta ancora di un territorio in gran parte inesplorato. Divertiti a creare stile più piccoli e a rimuovere le virgole.

Foto di Markus Winkler su Unsplash