28220 sujets

CSS et mise en forme, CSS3

[Résolu] Précédences des règles CSS

Bonjour à tous,

Je viens de découvrir un comportement qui me semble étrange et contre intuitif ayant trait à la précédence des règles CSS. Mieux vaut un exemple qu'une longue explication :

Voici le code XHTML :

<body>
  <ul id="mainMenu">
    <li id="homeMenu"><a href="" title="Accueil">Accueil</a></li>
    <li id="workMenu"><a href="" title="Travaux">Travaux</a></li>
    <li id="cvMenu"><a href="" title="Curriculum Vitae">CV</a></li>
    <li id="contactMenu"><a href="" title="Contact">Contact</a></li>
    <li id="blogMenu"><a href="" title="Blog">Blog</a></li>
  </ul>
</body>


Et le CSS correspondant :

ul#mainMenu li {
  background-color: red;
}

li#homeMenu {
  background-color: blue;
}


A priori je pensais que tous les éléments de la liste auraient un background rouge, sauf le premier (dont l'ID est homeMenu) qui aurait un background bleu.

Mais il n'en est rien !!! Tous ont un background-rouge. Il semblerait que la première règle CSS a précédence sur la deuxième, pourtant elle est définie *avant*¨.

Une explication ? Un workaround ? Merci d'avance !
Modifié par Piloutje (08 Jan 2007 - 20:49)
Cherchez plus, j'ai trouvé !!!

Pour avoir le résultat escompté, il faut écrire le CSS suivant :

ul#mainMenu li {
  background-color: red;
}

ul#mainMenu li#homeMenu {
  background-color: blue;
}


Car la précédence se calcule notamment en fonction du nombre d'ID, de nom et autres infos dans le sélecteur. Donc dans mon exemple du premier post, la première instruction CSS avait meilleure précédence car elle comportait le sélecteur "ul", un id et le sélecteur "li" (ça fait 3 infos), tandis que la seconde insctruction comportait que le sélecteur "li" et un id (ça fait deux infos).

J'ai découvert ça en relisant le standard : http://www.w3.org/TR/REC-CSS2/cascade.html

Comme quoi ça sert !
Modifié par Piloutje (08 Jan 2007 - 19:27)
Sujet clos
Aller à