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:
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.