Podcast CSS - 003: Specificità
Supponi di lavorare con i seguenti codici HTML e CSS:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Ci sono due regole concorrenti qui. Uno colorerà il pulsante di rosso e l'altro di blu. Quale regola viene applicata all'elemento? Comprendere la specificità dell'algoritmo della specifica CSS è fondamentale per capire in che modo il CSS decide tra regole concorrenti.
La specificità è una delle quattro fasi distinte della cascata, di cui abbiamo parlato nell'ultimo modulo, a cascade.
Punteggio di specificità
Ogni regola del selettore ottiene un punteggio. Puoi considerare la specificità come un punteggio totale e ogni tipo di selettore guadagna punti per quel punteggio. Vince il selettore con il punteggio più alto.
Con la specificità in un progetto reale, Il bilanciamento è assicurarsi che le regole CSS che prevedi di applicare vengano applicate e, in genere, mantenere bassi i punteggi per evitare complessità. Il punteggio dovrebbe essere il più alto possibile, anziché puntare al punteggio più alto possibile. In futuro potrebbe essere necessario applicare alcuni CSS davvero più importanti. Se scegli il punteggio più alto, farai fatica.
Punteggio per ogni tipo di selettore
Ogni tipo di selettore guadagna punti. Somma 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 1 o più punti la sostituirà
* {
color: red;
}
Selettore di elementi o pseudo-elemento
Un elemento (tipo) o pseudo-elemento ottiene 1 punto di specificità .
Selettore del tipo
div {
color: red;
}
Selettore di pseudo-elemento
::selection {
color: red;
}
Selettore di classi, pseudoclassi o attributi
Una classe, pseudo-classe o Il selettore di attributo ottiene 10 punti di specificità.
Selettore classe
.my-class {
color: red;
}
Selettore pseudo-classe
:hover {
color: red;
}
Selettore attributo
[href='#'] {
color: red;
}
La :not()
la pseudo-classe stessa 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 campione dovrebbe avere 11 punti di specificità
perché ha un selettore del tipo (div
) e una classe all'interno di :not()
.
Selettore ID
Un documento di identità
ottiene 100 punti di specificità,
purché utilizzi un selettore ID (#myID
) e non un selettore di attributi ([id="myID"]
).
#myID {
color: red;
}
Attributo di stile incorporato
CSS applicato direttamente all'attributo style
dell'elemento HTML,
ottiene un punteggio di specificità di 1000 punti.
Ciò significa che, per sostituirlo 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.
Questa è la specificità massima che un singolo elemento può ottenere.
Una regola !important
viene applicata a una proprietà CSS,
in modo che tutti i contenuti della regola generale (selettore e proprietà) non abbiano lo stesso punteggio di specificità.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Verifica le tue conoscenze
Verifica le tue conoscenze in materia di punteggio di specificità
Qual è il punteggio di specificità di a[href="#"]
?
Specificità nel contesto
La specificità di ogni selettore che corrisponde a un elemento viene sommata. Considera questo esempio di codice HTML:
<a class="my-class another-class" href="#">A link</a>
Questo link contiene due corsi. Aggiungi il seguente CSS e otterrai 1 punto di specificità:
a {
color: red;
}
Fai riferimento a una delle classi di questa regola, ora ha 11 punti di specificità:
a.my-class {
color: green;
}
Aggiungi l'altra classe al selettore, ora ha 21 punti di specificità:
a.my-class.another-class {
color: rebeccapurple;
}
Aggiungi l'attributo href
al selettore,
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 ottiene 41 punti di specificità:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Verifica le tue conoscenze
Verifica le tue conoscenze in materia di punteggio di specificità
Quale dei seguenti selettori vale 21 punti?
article > section
article:hover a[href]
article.card.dark
Visualizzazione della specificità
Nei diagrammi e nei calcolatori della specificità, la specificità viene spesso mostrata come segue:
Il gruppo a sinistra è id
selettori.
Il secondo gruppo è costituito dai selettori di classe, da attributo e pseudo-classe.
L'ultimo gruppo è costituito dai selettori di elementi e pseudo-elemento.
Come riferimento, il seguente selettore è 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Verifica le tue conoscenze
Verifica le tue conoscenze della specificità visualizzando
Quale dei seguenti selettori è 1-2-1
?
li#specialty section.dark
#specialty:hover li.dark
section#specialty.dark
[data-state-rad].dark#specialty:hover
Aumentando in modo pratico la specificità
Supponiamo di avere alcuni CSS simili ai seguenti:
.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 è pari a 1 punto e un selettore di attributi ([onclick]
), che corrisponde a 10 punti.
La regola precedente, .my-button
, ottiene 10 punti (0-1-0
),
perché ha un selettore di classe.
Se vuoi potenziare questa regola, ripeti il selettore della classe in questo modo:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Ora il pulsante avrà uno sfondo blu,
perché il nuovo selettore ottiene un punteggio di specificità di 20 punti (0-2-0
).
Un punteggio di specificità corrispondente vede la vittoria dell'istanza più recente
Per il momento continuiamo con l'esempio del pulsante e spostiamo il CSS in questo:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Il pulsante ha uno sfondo grigio
perché entrambi i selettori hanno lo stesso punteggio di specificità (0-1-0
).
Se cambi le regole nell'ordine di origine, il pulsante diventerà blu.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Questo è l'unico caso in cui prevale un CSS più recente. A questo scopo, deve corrispondere alla specificità di un altro selettore che ha come target lo stesso elemento.