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 pourtant ((Ok, j’arrête d’écrire comme le général Sulla.)).

Attention : gifs animés idiots et mignons.

Il existe de nombreux articles sur le sujet : par exemple https://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 Norris ((Pour plus d’info sur la « couleur » Chuck Norris : http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color.)) 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-souris ((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.)). 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 classes ((Notons que si vous avez une cascade de 11 classes, vous vous fourvoyez.)) Ce n’est d’ailleurs pas vraiment une base 10, on dit ça par commodité ((Pas parce que la base 10 est la plus utilisée, non non, bien entendu)).

Et c’est pour ça que #menu li surpasse li où que li soit ((Cherchez pas, ya pas de calembour)).

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. J’aime tellement ton sens de la métaphore. J’en ai modifié mon article (Non, j’ai pas été jusqu’à rajouter des gifs, déconne pas.)

  2. Bon a savoir. Apporte une explication à quelque chose que j’avais remarqué mais cela me permettra à l’avenir de mieux ciblé mes objets