Specificità

Esempio 1. Nel CSS impostiamo queste dichiarazioni:

h2 {color: red;}
.titolo {color: black;}
#titolo2 {color:blue;}

Ora inseriamo un elemento <h2> assegnando ad esso la classe .titolo e l'id titolo2.

<h2 class="titolo" id="titolo2"> Ecco il risultato:

Titolo di secondo livello.

Perchè il nostro <h2> è blue e non rosso o nero? Perchè l'indicazione di un id ha un peso specifico maggiore di una classe, che a sua volta pesa più di un semplice elemento.

Esempio 2. Ancora una prova. Definiamo due dichiarazioni:

.par { color: red; }
p.par { color: blue; }

A questo paragrafo assegno la classe par: <p class="par">. Come si vede esso è blue. Se facciamo il calcolo della specificità avremo 0-1-1 mentre con la semplice classe abbiamo 0-1-0.

Esempio 3. Ed ora l'esempio della lezione.

Questo paragrafo si trova all'interno di un div (e dovrebbe pertanto essere rosso) ma presenta anche l'attributo id="paragrafo". Per la regola della specificità prevale questa impostazione. 1-0-0 è superiore a 0-0-2.