Una de les característiques més importants del CSS és el que es coneix com herència o ordre en cascada. El que significa treballar en cascada es pot entendre fàcilment a partir de l'exemple següent.
Imagineu-vos que voleu crear un document que tingui tota la tipografia de color gris, d'una mida de 12 píxels, sobre un fons clar. Per aconseguir-ho haureu de definir la regla següent:
* { color: #33f; background-color: #eee; font-size: 12px; }
Aquesta regla de selector universal afectarà a tots els elements del document. Però, poseu per cas, que no voleu que la capçalera del primer nivell tingui el mateix color que la resta d'elements, sinó que el que voleu és que sigui de color vermell. Per això caldrà afegir una segona regla:
h1 { color: red; }
El navegador sobreescriurà el valor del color selector h1
sobre el selector universal, però el selector h1
heretarà la resta de propietats de la regla més general, i mostrarà, per tant, la mateixa mida i el mateix color de fons que la resta d'elements.
Es pot dir que les diferents regles competeixen entre elles segons un ordre de jerarquia o prioritat, de manera que, les propietats d'una regla d'un ordre superior, prevaldran sempre sobre les d'un ordre inferior.
Aquest ordre en cascada separa les regles en sis grups diferents segons el tipus de selector utilitzat. El llistat dels sis grups està ordenat de major a menor prioritat. En termes generals, tindran sempre preferència els tipus de selectors de més precisió davant dels selectors més generals.
Els sis grups en què queden agrupades les regles segons el tipus de selector utilitzat, ordenats de major a menor prioritat són els següents:
!important
darrere del seu valor:
h1 { color: red !important; }
style
de l'element XHTML:
<h1 style="color: red;">Lorem Ipsum</p>
#vermell { color: red; }
.vermell { color:red; } p:first-letter { color: red; }
h1 { color: red; }
* { color: red; }
Prioritzarà sempre la regla que contingui més selectors d'una jerarquia superior. Veieu un exemple:
#contingut .expressio .irregular color: red; } #contingut .expressio p strong { font-size: 20px; }
Les dues regles comparteixen el mateix selector id
, #contingut
, però la primera regla tindrà preferència sobre la segona, degut a que conté dos selectors del tipus class
mentre que la segona només conté un del mateix tipus.
En el cas hipotètic de que les dues regles continguin el mateix nombre de selectors d'ordre preferent, la prioritat vindrà donada per la seva ubicació. Una regla situada en una ubicació de prioritat alta s'imposarà sobre una altra d'ubicació de menys prioritat.
Hi ha sis tipus d'ubicacions, que queden ordenades de major a menor segons el seu nivell de prioritat, de la següent manera:
<style>
tindrà preferència sobre la resta d'ubicacions.@import
dins de l'element <style>
del document.<link />
.@import
dins d'una etiqueta <link />
del document.Finalment, quan diferents regles d'estil comparteixen el mateix nivell de prioritat d'ubicació, l'ordre de preferència vindrà determinat per l'ordre d'aparició. Una regla que apareix més tard que una altra tindrà preferència sobre la que ha aparegut prèviament.