Hoe werken autoriteit regels van CSS

Inleiding

Wanneer je CSS niet leert volgens het boekje (zoals ik) zal het je zeker niet ontgaan zijn, dat de CSS code soms niet altijd werkt, terwijl het nog zo duidelijk hebt geprogrammeerd. Dit heeft met autoriteit ofwel gespecificeerdheid (specificity) van CSS te maken: de CSS regels. Deze regels zijn logisch, misschien had je ze al wel beredeneerd

Stappen

Autoriteit bepaalt welke CSS regel wordt toegepast in de browser. Elke selector heeft zijn eigen plek in de autoriteit hierarchie. Er zijn 4 verschillende categorieen die de autoriteit bepalen:

inline styles
IDs
classes
elements

Hierbij gelden de volgende regels:

Wanneer selectors gelijk autoriteit hebben, geldt de laatste regel
Wanneer selectors geen gelijke autoriteit hebben, geldt degene die het meest specifiek is.
De laatste regel gedefineerd, is dominant over alles vorige conflicterende regels.
De ingebouwde style sheet is dominanter dan niet ingebouwde style sheets
ID selectors hebben een hogere dominantie dan attribute (zoals a of p)
Probeer altijd IDs te gebruiken om specifieker te worden
De universele selectors kan worden weergegeven met 0,0,0,0
Met deze code kunnen de 4 categorieen worden benaderd

Tips

Je kan de specifiekheid behalen met tools
De webmaster tools menu bar in FireFox is zeer handig voor het bekijken van de specifiekheid

Hoe werken autoriteit regels van CSS

Inleiding

Stappen

Tips

Links