Principio Specificità in CSS

Codegrind Team•Jul 22 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 “vince” e la sua dichiarazione di stile verrà applicata a quell’elemento HTML.

Pensa alla specificità come a un punteggio che determina quale dichiarazione di stile viene alla fine applicata a un elemento.

Guarda gli esempi seguenti:

<html>
  <head>
    <style>
      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>Bellissimo pargrafo!</p>
  </body>
</html>

<html>
  <head>
    <style>
      .classe1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="classe1">Bellissimo pargrafo!</p>
  </body>
</html>

<html>
  <head>
    <style>
      .classe1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="classe1" style="color:purple;">Bellissimo pargrafo!</p>
  </body>
</html>

Gerarchia della Specificità

Ogni selettore CSS ha il suo posto nella gerarchia della specificità.

Ci sono quattro categorie che definiscono il livello di specificità di un selettore:

Stili inline: <h1 style="color: red;">
ID: #navbar
Classi, pseudo-classi, selettori di attributi: .classe, :hover, [src]
Elementi e pseudo-elementi: h1, ::before ::after

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 attributi), aggiungi 1 per ogni selettore di elemento o pseudo-elemento.

Lo stile inline ottiene un valore di specificità di 1000 ed è sempre dato la massima priorità!

C’è un’eccezione a questa regola: la regola !important sovrascrive qualsiasi stile, anche quello inline.

La tabella qui sotto mostra alcuni esempi su come calcolare i valori di specificità:

Selettore	Valore Specificità	Punteggio
h1	1	1
.classe	10	10
h1.classe	11	1 + 11
#id	100	100
h1#id	101	1 + 100
`<h1 style="color: red;">`	1000	1000
h1.classe1.classe2	21	1 + 10 + 10

Il selettore con il valore di specificità è quello che avrà effetto sull’elemento sovrascrivendo le altre regole.