![](https://secure.gravatar.com/avatar/069849e93b798a9aee2c38a6d6b6a85d?s=150&d=https%3A%2F%2Fwww.maxlaferla.it%2Fwp-content%2Fthemes%2Fmax%2Fassets%2Fgravatar.gif&r=g)
Pubblicato da: Max
In data:
27 Feb 2021
Tempo di lettura:
![Nuove pseudo-classi css](https://www.maxlaferla.it/wp-content/uploads/2021/02/nuove-funzioni-css-300x300.jpeg)
Scrivi un CSS più pulito con le nuove pseudo-classi :where() e :is()
Se non hai sentito parlare delle pseudo-classi :where() e :is(), è assolutamente normale. Sono stati introdotti solo di recente nella maggior parte dei browser. Sicuramente a breve saranno ampiamente utilizzate, in quanto rappresentano un modo veloce e più pulito di scrivere codice css. In questo articolo impareremo come utilizzare i nostri nuovi pratici strumenti per scrivere CSS.
:is()
Pensa a quando vuoi applicare lo stesso stile a più elementi nel tuo HTML. Probabilmente ti ritroverai a scrivere qualcosa che assomiglia a questo:
.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
}.nav li,
.nav p {
padding: 5px 10px;
}
Con :is() possiamo scrivere il nostro CSS in un modo più breve, veloce ed elegante.
.main :is(h1, h2, .heading){
line-height: 1.2;
}.nav :is(li, p) {
padding: 5px 10px;
}
Immagina tutte le righe di codice che stai evitando di scrivere. Utilizzando le nuove pseudo-classi, utilizziamo un metodo molto simile a come funziona la nidificazione con i preprocessori tipo SCSS. La funzione pseudo-classe :is() prende un elenco di selettori e seleziona qualsiasi elemento che può essere selezionato da uno dei selettori in quell’elenco. Può anche essere concatenato con altri selettori come :not(), :firstchild() ecc.
:where()
Proprio come :is(), :where() prende un elenco di selettori come argomento e seleziona qualsiasi elemento che può essere selezionato da uno dei selettori in quell’elenco.
Il nostro codice di prima:
.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
}.nav li,
.nav p {
padding: 5px 10px;
}
dopo, usando :where()
.main :where(h1, h2, .heading){
line-height: 1.2;
}.nav :where(li, p) {
padding: 5px 10px;
}
Cosa! Ti sembra esattamente lo stesso ! Certo hai perfettamente ragione.. Allora dove sta la differenza? Si trova tutta nella
Specificità
:is()
Prende la specificità del suo selettore più specifico
:where()
Ha una specificità di tipo 0
È importante tenere a mente questo piccolo ma molto importante dettaglio quando utilizzi :is() e :where() nel codice, per evitare di applicare modifiche CSS in altri punti.
La maggior parte dei browser li supporta già e ti consiglio vivamente di iniziare ad abituarti a usarli e rendere il tuo codice più pulito e più veloce da scrivere!
Ciao alla prossima 🙂