Un truc qui arrive parfois quand on s’attaque \u00e0 du CSS c’est l’\u00e9l\u00e9ment qui se retrouve cibl\u00e9 par plusieurs instructions, \u00e9videmment contradictoires. Deux trucs qu’on apprend bien vite quand on fait du CSS pour ce genre de cas c’est :<\/p>\n
Derni\u00e8rement j’ai du travailler sur une surcharge css d’une interface. C’est \u00e0 dire appliquer un rendu diff\u00e9rent que le rendu de base mais simplement en ajoutant une nouvelle feuille de style et non pas en subsituant.<\/p>\n
Ce faisant, j’ai rencontr\u00e9 un cas particulier qui m’a interpel\u00e9. Alors que je tenais pour acquis ma premi\u00e8re assertion (\u00ab\u00a0La derni\u00e8re d\u00e9claration ciblant un \u00e9l\u00e9ment gagne toujours\u00a0\u00bb<\/em>) je suis tomb\u00e9 sur un cas l’invalidant !<\/p>\n Soit ce HTML :<\/p>\n Avec cette CSS :<\/p>\n Qu’est ce qui ressort ? Il ressort un fond rouge (red) !<\/p>\n En effet, le s\u00e9lecteur est plus pr\u00e9cis. Mais quelle logique exactement ? Car l\u00e0 le code est simple et on \u00ab\u00a0voit\u00a0\u00bb clairement que le premier s\u00e9lecteur est plus pr\u00e9cis donc a plus de poids. Qu’en est il avec des chaines de s\u00e9lection css \u00e0 rallonge ?<\/p>\n Et bien il y a un moyen facile de savoir. Un moyen logique de calculer le \u00ab\u00a0poids\u00a0\u00bb de la cha\u00eene de s\u00e9lection et donc quand elle va intervenir par rapport \u00e0 d’autres.<\/p>\n Additionner apr\u00e8s les 3 chiffres et cela donne le poids de la cha\u00eene.<\/p>\n Il suffit apr\u00e8s de comparer les poids de chaque cha\u00eene. La cha\u00eene ayant le poids le plus \u00e9lev\u00e9 est celle qui sera appliqu\u00e9e en priorit\u00e9.<\/p>\n Exemple :<\/p>\n C’est donc la seconde qui s’appliquera.<\/p>\n<div id=\"conteneurId\" class=\"conteneur\">\r\n <div id=\"elementId\" class=\"content\">El\u00e9ment<\/div>\r\n<\/div><\/pre>\n
.conteneur #elementId{\r\nbackground:red;\r\n}\r\n#elementId{\r\nbackground:blue;\r\n}<\/pre>\n\n
div#conteneurId div.content{\r\n background:red;\r\n}\r\n#conteneurId #contentId{\r\n background:green;\r\n}<\/pre>\n\n