31
Des styles qui atteignent leur cible
Si deux.règles.possèdent.la.même.spécificité,.c’est.celle.qui.est.définie.en.dernier.qui.prend.
le.dessus.
Spécificité
Par.calculer.le.niveau.de.spécificité.d’une.règle,.chaque.sélecteur.reçoit.une.valeur.numérique..La.spécificité.d’une.règle.est.ensuite.évaluée.par.addition.des.valeur.de.tous.ses.sélecteurs..
Malheureusement,.la.spécificité.n’est.pas.calculée.en.base 10.mais.avec.un.numéro.de.base.élevé.
et.non.spécifié..Ce.procédé.est.destiné.à.garantir.qu’un.sélecteur.très.spécifique,.comme.un.
sélecteur.d’ID,.ne.soit.jamais.redéfini.par.un.grand.nombre.de.sélecteurs.moins.spécifiques,.
comme.des.sélecteurs.de.type..Si.vos.sélecteurs.comptent.moins.de.10 sélecteurs,.vous.pouvez.cependant.vous.contenter,.pour.simplifier,.de.calculer.la.spécificité.en.base 10.
La.spécificité.d’un.sélecteur.se.décompose.en.quatre.niveaux.constituants :.a, b, c et d.
• Si.le.style.est.un.style.incorporé,.a vaut 1..
• b.vaut.le.nombre.total.de.sélecteurs.d’ID.
• c.vaut.le.nombre.de.sélecteurs.de.classe,.de.pseudo-classe.et.d’attribut.
• d.vaut.le.nombre.de.sélecteurs.de.type.et.de.sélecteurs.de.pseudo-élément.
Avec.ces.règles,.il.est.possible.de.calculer.la.spécificité.de.n’importe.quel.sélecteur.CSS..
Le Tableau 2.1.présente.une.série.de.sélecteurs.avec.leur.spécificité.correspondante.
Tableau 2.1 : Exemples de spécificité
Sélecteur
Spécificité
Spécificité en base 10
Style=""
1,0,0,0
1000
#wrapper #content {}
0,2,0,0
200
#content .datePosted {}
0,1,1,0
110
div#content {}
0,1,0,1
101
#content {}
0,1,0,0
100
p.comment .dateposted {}
0,0,2,1
21
p.comment{}
0,0,1,1
11
div p {}
0,0,0,2
2
p {}
0,0,0,1
1
Au.premier.abord,.toutes.ces.explications.concernant.la.spécificité.et.les.nombres.en.base.
élevée.mais.non.spécifiée.peuvent.sembler.déroutantes..Voici.donc.ce.qu’il.faut.en.retenir..
Fondamentalement,.une.règle.écrite.dans.un.attribut.de.style.sera.toujours.plus.spécifique.
que.n’importe.quelle.autre..Une.règle.avec.un.ID.sera.plus.spécifique.qu’une.règle.sans.et.une.
règle.avec.un.sélecteur.de.classe.le.sera.plus.qu’une.règle.avec.de.simples.sélecteurs.de.type..
Enfin,.si.deux.règles.possèdent.la.même.spécificité,.celle.définie.en.dernier.prend.le.dessus.
Des styles qui atteignent leur cible
Si deux.règles.possèdent.la.même.spécificité,.c’est.celle.qui.est.définie.en.dernier.qui.prend.
le.dessus.
Spécificité
Par.calculer.le.niveau.de.spécificité.d’une.règle,.chaque.sélecteur.reçoit.une.valeur.numérique..La.spécificité.d’une.règle.est.ensuite.évaluée.par.addition.des.valeur.de.tous.ses.sélecteurs..
Malheureusement,.la.spécificité.n’est.pas.calculée.en.base 10.mais.avec.un.numéro.de.base.élevé.
et.non.spécifié..Ce.procédé.est.destiné.à.garantir.qu’un.sélecteur.très.spécifique,.comme.un.
sélecteur.d’ID,.ne.soit.jamais.redéfini.par.un.grand.nombre.de.sélecteurs.moins.spécifiques,.
comme.des.sélecteurs.de.type..Si.vos.sélecteurs.comptent.moins.de.10 sélecteurs,.vous.pouvez.cependant.vous.contenter,.pour.simplifier,.de.calculer.la.spécificité.en.base 10.
La.spécificité.d’un.sélecteur.se.décompose.en.quatre.niveaux.constituants :.a, b, c et d.
• Si.le.style.est.un.style.incorporé,.a vaut 1..
• b.vaut.le.nombre.total.de.sélecteurs.d’ID.
• c.vaut.le.nombre.de.sélecteurs.de.classe,.de.pseudo-classe.et.d’attribut.
• d.vaut.le.nombre.de.sélecteurs.de.type.et.de.sélecteurs.de.pseudo-élément.
Avec.ces.règles,.il.est.possible.de.calculer.la.spécificité.de.n’importe.quel.sélecteur.CSS..
Le Tableau 2.1.présente.une.série.de.sélecteurs.avec.leur.spécificité.correspondante.
Tableau 2.1 : Exemples de spécificité
Sélecteur
Spécificité
Spécificité en base 10
Style=""
1,0,0,0
1000
#wrapper #content {}
0,2,0,0
200
#content .datePosted {}
0,1,1,0
110
div#content {}
0,1,0,1
101
#content {}
0,1,0,0
100
p.comment .dateposted {}
0,0,2,1
21
p.comment{}
0,0,1,1
11
div p {}
0,0,0,2
2
p {}
0,0,0,1
1
Au.premier.abord,.toutes.ces.explications.concernant.la.spécificité.et.les.nombres.en.base.
élevée.mais.non.spécifiée.peuvent.sembler.déroutantes..Voici.donc.ce.qu’il.faut.en.retenir..
Fondamentalement,.une.règle.écrite.dans.un.attribut.de.style.sera.toujours.plus.spécifique.
que.n’importe.quelle.autre..Une.règle.avec.un.ID.sera.plus.spécifique.qu’une.règle.sans.et.une.
règle.avec.un.sélecteur.de.classe.le.sera.plus.qu’une.règle.avec.de.simples.sélecteurs.de.type..
Enfin,.si.deux.règles.possèdent.la.même.spécificité,.celle.définie.en.dernier.prend.le.dessus.