- Blog
- Programmazione
- CSS
- CSS3 - Specificità
CSS3 - Specificità
- Programmazione
- CSS
- Giuseppe Ventura
- 09/10/2023
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.
Si può pensare alla specificità come a un punteggio/classifica che determina quale dichiarazione di stile viene infine applicata a un elemento.
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>
Esempio 2
In questo esempio, abbiamo aggiunto un selettore di classe (chiamato "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 elemento "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>
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>
Esempio 4
In questo esempio abbiamo aggiunto uno stile in linea per l'elemento "p". Il testo ora sarà rosa, perché allo stile in linea viene data 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 inline - Esempio: <h1 style="color: pink;">
- IDs - Esempio: #navbar
- Classi, pseudo-classi, selettori attributo - Esempio: .test, :hover, [href]
- Elementi e pseudo-elementi - Esempio: h1, ::before
Come calcolare la specificità?
Si inizia da 0, si aggiunge 100 per ogni valore ID, si aggiunge 10 per ogni valore di classe (o pseudo-classe o selettore di attributo), si aggiunge 1 per ogni selettore di elemento o pseudo-elemento.
La tabella seguente mostra alcuni esempi su come calcolare i valori di specificità:
| Selettore | Valore di specificità | Calcolo |
|---|---|---|
| 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 (il selettore universale viene ignorato) |
Il selezionatore con il valore di specificità più alto vincerà e avrà effetto!
Esempio
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
La specificità di A è 1 (un selettore di 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à
Eguale specificità: vince l'ultima regola - Se la stessa regola viene scritta due volte nel foglio di stile esterno, allora vince l'ultima regola:
h1 {background-color: yellow;}
h1 {background-color: red;}
I selettori ID hanno una specificità maggiore rispetto ai selettori di attributo - osserva le tre righe di codice seguenti:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
la prima regola è più specifica delle altre due, e verrà quindi applicata.
I selettori contestuali sono più specifici di un selettore a singolo elemento - il foglio di stile incorporato è più vicino all'elemento a cui applicare lo stile. Quindi nella seguente situazione
Dal file CSS esterno:
#content h1 {background-color: red;}
Nel file HTML:
<style>
#content h1 {background-color: yellow;}
</style>
verrà applicata quest'ultima regola.
Un selettore di classe batte qualsiasi numero di selettori di elementi - un selettore di classe come .intro batte h1, p, div, ecc.:
.intro {background-color: yellow;}
h1 {background-color: red;}
Il selettore universale (*) e i valori ereditati hanno una specificità pari a 0 - Il selettore universale (*) e i valori ereditati vengono ignorati!