Specificitet handlar om att veta vilken stil som ska användas när flera regler kan tillämpas på ett element.
Praktiska steg:
- Räkna tecken: Varje del i en regel räknas som 1 tecken, inklusive skiljetecken.
- Prioritera ordning: Inline-stilar har högst prioritet, följt av ID-selektorer, klassselektorer och elementsselektorer.
- Jämför höger till vänster: Börja med den sista delen av varje regel och jämför den mot den sista delen av andra regler.
- Välj den mest specifika regeln: Reglerna med flest tecken eller den högsta prioriteringen vinner.
Nyckelbegrepp:
- Inline-stilar: Stilar som tillämpas direkt på elementet, t.ex.
<p style="color: red;">.
- ID-selektorer: Stilar som använder ett unikt ID, t.ex.
#min_rubrik.
- Klassselektorer: Stilar som använder en klass, t.ex.
.rubrik.
- Elementsselektorer: Stilar som riktar sig mot specifika element, t.ex.
p.
CSS-exempel:
p {
color: black;
}
#rubrik {
color: red;
}
.stor {
font-size: 24px;
}
Vilka stilar tillämpas på elementet
<p id="rubrik" class="stor">?
- Inline-stilar saknas.
- ID-selektorn #rubrik är mer specifik än klassselektorn .stor (bägge har 1 tecken).
- ID-selektorn #rubrik har högre prioritet än elementsselektorn p.
Slutsats: Elementet <p id="rubrik" class="stor"> kommer att ha röd färg eftersom ID-selektorns #rubrik regel är mer specifik.