Sélecteurs CSS – poids des déclarations

Contrairement aux humains, les sélecteurs CSS ne sont pas tous égaux. Eh non. Il y a même une sacrée hiérarchie, et bien fou serait le petit li de défier un #global. Ce monde est rude et cruel, et les sélecteurs, malgré tout leur courage de vaillants soldats, ne peuvent échapper à sa dure loi, sévère mais juste pourtant1.

Attention : gifs animés idiots et mignons.

Il existe de nombreux articles sur le sujet : par exemple http://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/ (poke copain :3 ), mais il est toujours bon de rappeler les bases sur ce sujet, et je vais essayer de le faire de manière claire, avec des illustrations pertinentes, cf la note plus haut.

On sait que la place dans le/les fichier/s css importe, puisqu’un sélecteur peut être redéfini plus loin, mais si l’on définit

#menu li {
   background: lavender;
}

et plus loin

li {
   background: chucknorris;
}

Les items de liste du menu resteront désespérément d’une (charmante, au demeurant) couleur lavande. Oui, Chuck Norris2 battu par un bouquet de lavande. Vous l’aurez lu ici en premier.


Édition du : à mon grand regret, ce dernier détail semble ne pas fonctionner. La couleur « chucknorris » ne marche qu’avec bgcolor, sur <body> ou sur <table>, et pas dans le css. Cette histoire est amusante mais obsolète. N’utilisez pas bgcolor, les enfants. Surtout pas.


Eh bien, c’est parce que les sélecteurs ont des poids différents. Un choix a été fait – je dois avouer ne pas savoir par qui – de donner un poids arbitraire aux différents types de sélecteurs.

  • Un élément html est faible, c’est un chaton. Son poids est de 1. La quantité de lait qu’il ingère, régurgite, ou fiche par terre n’est pas prise en compte.

    gif-kitten-animals-milk-629677

  • Une classe a un poids de 10, c’est une chauve-souris3. En plus d’être choupi, ça vole, et ça vous débarrasse des moustiques.

    yawning-batling

  • Un id, c’est tout de suite un calibre différent. Mettons que ce soit un panda roux : c’est über-mignon, et ça doit cogner pas mal si ça s’y met. Poids de 100.

    fighting-red-pandas

Et tout ça s’additionne :

  • un chaton + un panda roux > une chauve-souris
  • une chauve-souris + une chauve-souris + un chaton > une chauve-souris + un chaton
  • un panda roux > beaucoup trop de chauves-souris pour être comptées. C’est d’ailleurs là qu’on voit que ces nombres sont arbitraires : un poids de 100 ne signifie pas qu’une id sera surpassée par une cascade de 11 classes4 Ce n’est d’ailleurs pas vraiment une base 10, on dit ça par commodité5.

Et c’est pour ça que #menu li surpasse li où que li soit6.

Oh, un dernier mot : n’abusez pas des pandas roux. C’est pratique parce que puissant, mais c’est justement leur désavantage ! On a vite fait de rajouter un panda roux après un autre, et encore un autre, pour surcharger une précédente déclaration. Et on finit par mettre des !important, et ça, c’est mal. Les !important, ce sont des rhinocéros : impossible de s’en débarrasser comme ça, le mieux qu’on puisse faire c’est de les faire se battre avec un autre rhinocéros, et à la fin, le salon est rempli.

rhino

(oui, c’est biaisé, les petits rhinos c’est mignon comme tout, mais allez trouver une métaphore pour ça, hein, aussi)


  1. Ok, j’arrête d’écrire comme le général Sulla

  2. Pour plus d’info sur la « couleur » Chuck Norris : http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color

  3. Que personne ne couine « les chauves-souris ça mord c’est vilain et ça se prend dans les cheveux », en Europe il y a 31 espèces de chauves-souris, toutes insectivores, et une seule, la Sérotine commune, est susceptible de transmettre la rage – et le coup des cheveux est un mythe abscons. 

  4. Notons que si vous avez une cascade de 11 classes, vous vous fourvoyez. 

  5. Pas parce que la base 10 est la plus utilisée, non non, bien entendu 

  6. Cherchez pas, ya pas de calembour 

Laisser une réponse

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax