{"id":547,"date":"2013-12-21T17:18:23","date_gmt":"2013-12-21T16:18:23","guid":{"rendered":"http:\/\/informatique.lamecarlate.net\/blog\/?p=547"},"modified":"2018-01-31T22:05:53","modified_gmt":"2018-01-31T21:05:53","slug":"selecteurs-css-poids","status":"publish","type":"post","link":"https:\/\/informatique.lamecarlate.net\/articles\/selecteurs-css-poids","title":{"rendered":"S\u00e9lecteurs CSS &ndash; poids des d\u00e9clarations"},"content":{"rendered":"<p>Contrairement aux humains, les s\u00e9lecteurs CSS ne sont pas tous \u00e9gaux. Eh non. Il y a m\u00eame une sacr\u00e9e hi\u00e9rarchie, et bien fou serait le petit <code>li<\/code> de d\u00e9fier un <code>#global<\/code>. Ce monde est rude et cruel, et les s\u00e9lecteurs, malgr\u00e9 tout leur courage de vaillants soldats, ne peuvent \u00e9chapper \u00e0 sa dure loi, s\u00e9v\u00e8re mais juste pourtant ((Ok, j&rsquo;arr\u00eate d&rsquo;\u00e9crire comme le <a href=\"http:\/\/warhammer40k.wikia.com\/wiki\/Valhallan_Ice_Warriors#Notable_Valhallan_Ice_Warriors\">g\u00e9n\u00e9ral Sulla<\/a>.)).<\/p>\n<p><!--more--><\/p>\n<p><em>Attention : gifs anim\u00e9s idiots et mignons.<\/em><\/p>\n<p>Il existe de nombreux articles sur le sujet : par exemple <a href=\"https:\/\/www.emmanuelbeziat.com\/blog\/principes-du-css-poids-des-declarations\/\">https:\/\/www.emmanuelbeziat.com\/blog\/principes-du-css-poids-des-declarations\/<\/a> (poke copain :3 ), mais il est toujours bon de rappeler les bases sur ce sujet, et je vais essayer de le faire de mani\u00e8re claire, avec des illustrations pertinentes, <span lang=\"la\">cf<\/span> la note plus haut.<\/p>\n<p>On sait que la place dans le\/les fichier\/s css importe, puisqu&rsquo;un s\u00e9lecteur peut \u00eatre red\u00e9fini plus loin, mais si l&rsquo;on d\u00e9finit<\/p>\n<pre><code>#menu li {\n   background: lavender;\n}\n<\/code><\/pre>\n<p>et plus loin<\/p>\n<pre><code>li {\n   background: chucknorris;\n}\n<\/code><\/pre>\n<p>Les items de liste du menu resteront d\u00e9sesp\u00e9r\u00e9ment d&rsquo;une (charmante, au demeurant) couleur lavande. Oui, Chuck Norris ((Pour plus d&rsquo;info sur la \u00ab\u00a0couleur\u00a0\u00bb Chuck Norris : <a href=\"http:\/\/stackoverflow.com\/questions\/8318911\/why-does-html-think-chucknorris-is-a-color\">http:\/\/stackoverflow.com\/questions\/8318911\/why-does-html-think-chucknorris-is-a-color<\/a>.)) battu par un bouquet de lavande. Vous l&rsquo;aurez lu ici en premier.<\/p>\n<hr \/>\n<p>\u00c9dition du <time datetime=\"2014-07-14\">14 juillet<\/time> : \u00e0 mon grand regret, ce dernier d\u00e9tail semble ne pas fonctionner. La couleur \u00ab\u00a0chucknorris\u00a0\u00bb ne marche qu&rsquo;avec <code>bgcolor<\/code>, sur <code>&lt;body&gt;<\/code> ou sur <code>&lt;table&gt;<\/code>, et pas dans le css. Cette histoire est amusante mais obsol\u00e8te. N&rsquo;utilisez pas <code>bgcolor<\/code>, les enfants. Surtout pas.<\/p>\n<hr \/>\n<p>Eh bien, c&rsquo;est parce que les s\u00e9lecteurs ont des poids diff\u00e9rents. Un choix a \u00e9t\u00e9 fait &#8211; je dois avouer ne pas savoir par qui &#8211; de donner un poids arbitraire aux diff\u00e9rents types de s\u00e9lecteurs.<\/p>\n<ul>\n<li>\n<p>Un <em>\u00e9l\u00e9ment html<\/em> est faible, c&rsquo;est un chaton. Son poids est de 1. La quantit\u00e9 de lait qu&rsquo;il ing\u00e8re, r\u00e9gurgite, ou fiche par terre n&rsquo;est pas prise en compte.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/sanctuaire.lamecarlate.net\/web\/articles\/gif-kitten-animals-milk-629677.gif\" alt=\"gif-kitten-animals-milk-629677\" width=\"240\" height=\"161\" class=\"aligncenter size-full wp-image-555\" \/><\/p>\n<\/li>\n<li>\n<p>Une <em>classe<\/em> a un poids de 10, c&rsquo;est une chauve-souris ((Que personne ne couine \u00ab\u00a0les chauves-souris \u00e7a mord c&rsquo;est vilain et \u00e7a se prend dans les cheveux\u00a0\u00bb, en Europe il y a 31 esp\u00e8ces de chauves-souris, toutes insectivores, et une seule, la S\u00e9rotine commune, est susceptible de transmettre la rage &#8211; et le coup des cheveux est un mythe abscons.)). En plus d&rsquo;\u00eatre choupi, \u00e7a vole, et \u00e7a vous d\u00e9barrasse des moustiques.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/sanctuaire.lamecarlate.net\/web\/articles\/yawning-batling.gif\" alt=\"yawning-batling\" width=\"240\" height=\"163\" class=\"aligncenter size-full wp-image-581\" \/><\/p>\n<\/li>\n<li>\n<p>Un <em>id<\/em>, c&rsquo;est tout de suite un calibre diff\u00e9rent. Mettons que ce soit un panda roux : c&rsquo;est <span lang=\"de\">\u00fcber<\/span>-mignon, et \u00e7a doit cogner pas mal si \u00e7a s&rsquo;y met. Poids de 100.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/sanctuaire.lamecarlate.net\/web\/articles\/fighting-red-pandas.gif\" alt=\"fighting-red-pandas\" width=\"240\" height=\"174\" class=\"aligncenter size-full wp-image-561\" \/><\/p>\n<\/li>\n<\/ul>\n<p>Et tout \u00e7a s&rsquo;additionne :<\/p>\n<ul>\n<li>un chaton + un panda roux > une chauve-souris<\/li>\n<li>une chauve-souris + une chauve-souris + un chaton > une chauve-souris + un chaton<\/li>\n<li>un panda roux > beaucoup trop de chauves-souris pour \u00eatre compt\u00e9es. C&rsquo;est d&rsquo;ailleurs l\u00e0 qu&rsquo;on voit que ces nombres sont arbitraires : un poids de 100 ne signifie pas qu&rsquo;une id sera surpass\u00e9e par une cascade de 11 classes ((Notons que si vous avez une cascade de 11 classes, vous vous fourvoyez.)) <a href=\"http:\/\/stackoverflow.com\/questions\/12002845\/what-is-the-rule-behind-css-256-classes-override-one-id\">Ce n&rsquo;est d&rsquo;ailleurs pas vraiment une base 10<\/a>, on dit \u00e7a par commodit\u00e9 ((Pas parce que la base 10 est la plus utilis\u00e9e, non non, bien entendu)).<\/li>\n<\/ul>\n<p>Et c&rsquo;est pour \u00e7a que <code>#menu li<\/code> surpasse <code>li<\/code> o\u00f9 que <code>li<\/code> soit ((Cherchez pas, ya pas de calembour)).<\/p>\n<p>Oh, un dernier mot : n&rsquo;abusez pas des pandas roux. C&rsquo;est pratique parce que puissant, mais c&rsquo;est justement leur d\u00e9savantage ! On a vite fait de rajouter un panda roux apr\u00e8s un autre, et encore un autre, pour surcharger une pr\u00e9c\u00e9dente d\u00e9claration. Et on finit par mettre des <code>!important<\/code>, et \u00e7a, c&rsquo;est <em>mal<\/em>. Les <code>!important<\/code>, ce sont des rhinoc\u00e9ros : impossible de s&rsquo;en d\u00e9barrasser comme \u00e7a, le mieux qu&rsquo;on puisse faire c&rsquo;est de les faire se battre avec un autre rhinoc\u00e9ros, et \u00e0 la fin, le salon est rempli.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/sanctuaire.lamecarlate.net\/web\/articles\/rhino.gif\" alt=\"rhino\" width=\"240\" height=\"180\" class=\"aligncenter size-full wp-image-592\" \/><\/p>\n<p>(oui, c&rsquo;est biais\u00e9, les petits rhinos c&rsquo;est mignon comme tout, mais allez trouver une m\u00e9taphore pour \u00e7a, hein, aussi)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contrairement aux humains, les s\u00e9lecteurs CSS ne sont pas tous \u00e9gaux. Eh non. Il y a m\u00eame une sacr\u00e9e hi\u00e9rarchie, et bien fou serait le petit li de d\u00e9fier un [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":600,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[39],"_links":{"self":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/547"}],"collection":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":1,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"predecessor-version":[{"id":912,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/547\/revisions\/912"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media\/600"}],"wp:attachment":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}