Specificità CSS
Cos'è la specificità?
Se ci sono due o più regole CSS che puntano allo stesso elemento, il selettore con il valore di specificità più alto "vincerà" e la sua dichiarazione di stile verrà applicata a quell'elemento HTML.
Pensa alla specificità come a un punteggio/classifica che determina quale dichiarazione di stile viene applicata in definitiva a un elemento.
Guarda i seguenti esempi:
Esempio 1
In questo esempio, abbiamo utilizzato l'elemento "p" come selettore e specificato un colore rosso per questo elemento. Il testo sarà rosso:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Ora, guarda l'esempio 2:
Esempio 2
In questo esempio, abbiamo aggiunto un selettore di classe (denominato "test") e specificato un colore verde per questa classe. Il testo ora sarà verde (anche se abbiamo specificato un colore rosso per il selettore di elementi "p". Questo perché al selettore di classe viene data una priorità più alta:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Ora, guarda l'esempio 3:
Esempio 3
In questo esempio, abbiamo aggiunto il selettore id (denominato "demo"). Il testo ora sarà blu, perché al selettore id viene data una priorità più alta:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Ora, guarda l'esempio 4:
Esempio 4
In questo esempio, abbiamo aggiunto uno stile in linea per l'elemento "p". Il testo ora sarà rosa, perché lo stile in linea ha la massima priorità:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Gerarchia di specificità
Ogni selettore CSS ha il suo posto nella gerarchia delle specificità.
Esistono quattro categorie che definiscono il livello di specificità di un selettore:
- Stili in linea - Esempio: <h1 style="color: pink;">
- ID - Esempio: #navbar
- Classi, pseudo-classi, selettori di attributi - Esempio: .test, :hover, [href]
- Elementi e pseudo-elementi - Esempio: h1, :before
Come calcolare la specificità?
Memorizza come calcolare la specificità!
Inizia da 0, aggiungi 100 per ogni valore ID, aggiungi 10 per ogni valore di classe (o pseudo-classe o selettore di attributo), aggiungi 1 per ogni selettore di elemento o pseudo-elemento.
Nota: lo stile in linea ottiene un valore di specificità di 1000 e viene sempre data la massima priorità!
Nota 2: c'è un'eccezione a questa regola: se usi la !important
regola, sovrascriverà anche gli stili in linea!
La tabella seguente mostra alcuni esempi su come calcolare i valori di specificità:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Il selettore con il valore di specificità più alto vincerà e avrà effetto!
Considera questi tre frammenti di codice:
Esempio
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
La specificità di A è 1 (selettore di un elemento)
La specificità di B è 101 (un riferimento ID + un selettore di elemento)
La specificità di C è 1000 (stile in linea)
Poiché la terza regola (C) ha il valore di specificità più alto (1000), verrà applicata questa dichiarazione di stile.
Altri esempi di regole di specificità
Uguale specificità: vince l'ultima regola - Se la stessa regola viene scritta due volte nel foglio di stile esterno, vince l'ultima regola:
Esempio
h1 {background-color: yellow;}
h1 {background-color: red;}
I selettori ID hanno una specificità maggiore rispetto ai selettori di attributi : osserva le tre righe di codice seguenti:
Esempio
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
la prima regola è più specifica delle altre due e sarà quindi applicata.
I selettori contestuali sono più specifici di un singolo elemento selettore - Il foglio di stile incorporato è più vicino all'elemento a cui applicare lo stile. Quindi nella seguente situazione
Esempio
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
si applicherà quest'ultima regola.
Un selettore di classe batte un numero qualsiasi di selettori di elementi : un selettore di classe come .intro batte h1, p, div, ecc:
Esempio
.intro {background-color: yellow;}
h1 {background-color:
red;}
Il selettore universale (*) ei valori ereditati hanno una specificità 0 - Il selettore universale (*) ei valori ereditati vengono ignorati!