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

Durante la scrittura di codice CSS, a volte potresti ritrovarti con lunghi elenchi di selettori per scegliere come target più elementi con le stesse regole di stile. Ad esempio, se vuoi modificare il colore di tutti i tag <b> presenti all'interno di un elemento di intestazione, potresti scrivere:

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

Puoi utilizzare invece :is() per migliorare la leggibilità evitando un selettore lungo:

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

La leggibilità e la praticità del selettore più brevi sono solo una parte del valore che :is() e :where() portano a CSS. In questo post scoprirai la sintassi e il valore di questi due pseudo-selettori funzionali.

Compatibilità del browser

:is()

:where()

Scopri :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. Durante la scrittura di codice CSS, consentono di raggruppare gli elementi al centro, 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 :is() in materia di raggruppamento. Ciò include l'utilizzo ovunque nel selettore, il loro nidificazione e l'accatastamento. La massima flessibilità dei CSS che 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 selettore precedenti dimostra la flessibilità di queste due pseudo-classi funzionali. Per trovare le aree del codice che potrebbero trarre vantaggio da :is() o :where(), cerca i selettori con più virgole e le ripetizioni dei selettori.

Utilizzo di selettori semplici e complessi con :is()

Per un ripasso dei selettori, consulta il modulo selettori su Impara a usare 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 un ripasso delle specifiche, consulta il modulo Specificity 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 della prima funzionalità di selezione di questo tipo.
• :is() assume la specificità del suo selettore più specifico.
  :is(a,div,#id) ha un punteggio di specificità di un ID, 100 punti.

Utilizzare il selettore di specificità più elevata nell'elenco è stato un problema solo quando ero troppo entusiasta del raggruppamento. Sono sempre stato in grado di migliorare la leggibilità spostando il selettore ad alta specificità sul proprio selettore, dove l'impatto non sarebbe stato 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 c'è alcuna specificità con cui competere al momento di scrivere il codice CSS. Il CSS sta lavorando a una funzionalità di raggruppamento come questa da un po' di tempo, è qui ed è ancora un territorio in gran parte inesplorato. Divertiti a creare fogli di stile più piccoli e a rimuovere le virgole.

Foto di Markus Winkler su Unsplash