Podcast su CSS - 003: Specificità
Supponiamo che tu stia lavorando con i seguenti HTML e CSS:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Ci sono due regole in conflitto. Uno il colore del pulsante è rosso, l'altro blu. Quale regola viene applicata all'elemento? Capire l'algoritmo della specifica CSS per la specificità è fondamentale per capire come il CSS decide tra le regole concorrenti.
La specificità è una delle quattro fasi distinte della cascata, trattata nell'ultimo modulo, sulla cascata.
Punteggio di specificità
A ogni regola del selettore viene assegnato un punteggio. Puoi pensare alla specificità come a un punteggio totale e ogni tipo di selettore permette di guadagnare punti per quel punteggio. Vince il selettore con il punteggio più alto.
Con la specificità di un progetto reale, il bilanciamento è assicurarsi che le regole CSS che prevedi di applicare vengano effettivamente applicate, in genere mantenendo bassi i punteggi per evitare complessità. Il punteggio deve essere alto quanto necessario, anziché puntare al punteggio più alto possibile. In futuro, potrebbe essere necessario applicare alcuni CSS davvero più importanti. Se cerchi il punteggio più alto, sarà un lavoro difficile.
Punteggio di ogni tipo di selettore
Ogni tipo di selettore fa guadagnare punti. Aggiungi tutti questi punti per calcolare la specificità complessiva di un selettore.
Selettore universale
Un selettore universale (*)
non ha specificità e riceve 0 punti.
Ciò significa che qualsiasi regola con uno o più punti la sostituirà.
* {
color: red;
}
Selettore di elementi o pseudo-elementi
Un selettore di elemento (type) o pseudo elemento ottiene 1 punto di specificità .
Selettore del tipo
div {
color: red;
}
Selettore di pseudo elementi
::selection {
color: red;
}
Selettore di classe, pseudo-classe o attributo
Un selettore di class, pseudo-classe o attributo riceve 10 punti di specificità.
Selettore classe
.my-class {
color: red;
}
Selettore della pseudo-classe
:hover {
color: red;
}
Selettore attributo
[href='#'] {
color: red;
}
La pseudo-classe :not() non aggiunge nulla al calcolo della specificità.
Tuttavia, i selettori passati come argomenti vengono aggiunti al calcolo della specificità.
div:not(.my-class) {
color: red;
}
Questo esempio avrebbe 11 punti di specificità
perché ha un selettore del tipo (div) e una classe all'interno di :not().
Selettore ID
Un selettore ID riceve 100 punti di specificità, a condizione che utilizzi un selettore ID (#myID) e non un selettore di attributi ([id="myID"]).
#myID {
color: red;
}
Attributo stile incorporato
Se viene applicato direttamente all'attributo style dell'elemento HTML, il codice CSS ottiene un punteggio di specificità di 1000 punti.
Significa che, per eseguire l'override in CSS,
devi scrivere un selettore estremamente specifico.
<div style="color: red"></div>
!important regola
Infine, un !important alla fine di un valore CSS ottiene un punteggio di specificità di 10.000 punti.
Si tratta della specificità più elevata che un singolo articolo può ottenere.
Una regola !important viene applicata a una proprietà CSS,
di conseguenza, tutti gli elementi nella regola generale (selettore e proprietà) non ottengono lo stesso punteggio di specificità.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Verifica la tua comprensione
Verifica la tua conoscenza del punteggio di specificità
Qual è il punteggio di specificità di a[href="#"]?
a vale 1 punto, ma [href="#"] vale 10 punti.a vale 1 punto e [href="#"] vale 10 punti, per un punteggio totale di 11 punti.Specificità nel contesto
La specificità di ogni selettore che corrisponde a un elemento viene sommata. Considera questo HTML di esempio:
<a class="my-class another-class" href="#">A link</a>
Questo link contiene due corsi. Aggiungi il seguente CSS, che ottiene 1 punto di specificità:
a {
color: red;
}
Fai riferimento a una delle classi in questa regola, ora ha 11 punti di specificità:
a.my-class {
color: green;
}
Aggiungi l'altra classe al selettore, che ora ha 21 punti di specificità:
a.my-class.another-class {
color: rebeccapurple;
}
Aggiungi l'attributo href al selettore, che ora ha 31 punti di specificità:
a.my-class.another-class[href] {
color: goldenrod;
}
Infine,aggiungi una pseudo-classe :hover a tutto questo,
il selettore termina con 41 punti di specificità:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Verifica la tua comprensione
Verifica la tua conoscenza del punteggio di specificità
Quale dei seguenti selettori vale 21 punti?
article > sectionarticle.card.darkarticle:hover a[href]Specificità della visualizzazione
Nei diagrammi e nei calcolatori della specificità, la specificità viene spesso indicata in questo modo:
Il gruppo a sinistra è costituito da id selettori.
Il secondo gruppo è costituito dai selettori di classe, attributo e pseudo-classe.
Il gruppo finale è costituito dai selettori di elementi e pseudo-elementi.
Come riferimento, il seguente selettore è 0-4-1:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Verifica la tua comprensione
Verifica le tue conoscenze sulla visualizzazione della specificità
Quale dei seguenti selettori è 1-2-1?
section#specialty.dark1-1-1.#specialty:hover li.dark[data-state-rad].dark#specialty:hover1-3-0.li#specialty section.dark1-1-2.Aumento pragmatico della specificità
Supponiamo di avere un codice CSS simile al seguente:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Con un codice HTML simile al seguente:
<button class="my-button" onclick="alert('hello')">Click me</button>
Il pulsante ha uno sfondo grigio perché il secondo selettore guadagna 11 punti di specificità (0-1-1). Questo perché ha un selettore del tipo (button), che corrisponde a 1 punto e un selettore di attributi ([onclick]), che corrisponde a 10 punti.
La regola precedente, .my-button, riceve 10 punti (0-1-0), perché ha un selettore di corsi.
Se vuoi dare un boost a questa regola, ripeti il selettore della classe in questo modo:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Il pulsante avrà uno sfondo blu perché il nuovo selettore riceve un punteggio di specificità di 20 punti (0-2-0).
Con un punteggio di specificità corrispondente, vince l'istanza più recente
Per ora manteniamo l'esempio del pulsante e spostiamo il CSS in questo modo:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Il pulsante ha uno sfondo grigio,
perché entrambi i selettori hanno un punteggio di specificità identico (0-1-0).
Se cambi le regole nell'ordine di origine, il pulsante diventa blu.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Questa è l'unica istanza in cui vince il CSS più recente. Per farlo, deve corrispondere alla specificità di un altro selettore che ha come target lo stesso elemento.