[{"data":1,"prerenderedAt":740},["ShallowReactive",2],{"page-\u002Fcss\u002Fcascade-et-specificite":3,"pieces-css":697,"autour-\u002Fcss\u002Fcascade-et-specificite":722,"prerequis-\u002Fcss\u002Fcascade-et-specificite":727,"plan-css":729},{"id":4,"title":5,"body":6,"description":673,"extension":674,"ligne":40,"meta":675,"motsCles":676,"navigation":84,"niveau":680,"path":681,"prerequis":682,"ressources":684,"seo":692,"sources":693,"stem":695,"__hash__":696},"docs\u002Fcss\u002F02.cascade-et-specificite.md","Cascade et spécificité",{"type":7,"value":8,"toc":662},"minimark",[9,14,27,31,35,111,143,151,155,162,229,238,241,292,295,299,302,337,340,346,350,369,413,416,427,431,434,492,518,521,525,532,561,573,577,580,601,604,618,622,658],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Prévoir quelle règle gagne quand plusieurs visent le même élément.",[18,22,23],{},"Calculer la spécificité d'un sélecteur.",[18,25,26],{},"Utiliser l'héritage à ton avantage.",[10,28,30],{"id":29},"deux-règles-en-conflit","Deux règles en conflit",[32,33,34],"p",{},"Reprenons la page de recettes. Voici deux règles qui visent le même paragraphe :",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","p {\n  color: black;\n}\n\n.duree {\n  color: gray;\n}\n","css","",[43,44,45,57,73,79,86,94,106],"code",{"__ignoreMap":41},[46,47,50,53],"span",{"class":48,"line":49},"line",1,[46,51,32],{"class":52},"s5JFL",[46,54,56],{"class":55},"scfrF"," {\n",[46,58,60,64,67,70],{"class":48,"line":59},2,[46,61,63],{"class":62},"s5iOY","  color",[46,65,66],{"class":55},": ",[46,68,69],{"class":62},"black",[46,71,72],{"class":55},";\n",[46,74,76],{"class":48,"line":75},3,[46,77,78],{"class":55},"}\n",[46,80,82],{"class":48,"line":81},4,[46,83,85],{"emptyLinePlaceholder":84},true,"\n",[46,87,89,92],{"class":48,"line":88},5,[46,90,91],{"class":62},".duree",[46,93,56],{"class":55},[46,95,97,99,101,104],{"class":48,"line":96},6,[46,98,63],{"class":62},[46,100,66],{"class":55},[46,102,103],{"class":62},"gray",[46,105,72],{"class":55},[46,107,109],{"class":48,"line":108},7,[46,110,78],{"class":55},[36,112,116],{"className":113,"code":114,"language":115,"meta":41,"style":41},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cp class=\"duree\">45 minutes\u003C\u002Fp>\n","html",[43,117,118],{"__ignoreMap":41},[46,119,120,123,125,128,131,135,138,140],{"class":48,"line":49},[46,121,122],{"class":55},"\u003C",[46,124,32],{"class":52},[46,126,127],{"class":62}," class",[46,129,130],{"class":55},"=",[46,132,134],{"class":133},"shWOn","\"duree\"",[46,136,137],{"class":55},">45 minutes\u003C\u002F",[46,139,32],{"class":52},[46,141,142],{"class":55},">\n",[32,144,145,146,150],{},"Le paragraphe est-il noir ou gris ? Il est gris. Le navigateur doit trancher entre des règles qui se contredisent : ce mécanisme s'appelle la ",[147,148,149],"strong",{},"cascade",". Elle compare les règles selon trois critères, dans cet ordre : l'importance, la spécificité, puis l'ordre d'écriture.",[10,152,154],{"id":153},"la-spécificité","La spécificité",[32,156,157,158,161],{},"La ",[147,159,160],{},"spécificité"," mesure à quel point un sélecteur est précis. Plus il est précis, plus il pèse lourd. Voici l'échelle, du plus faible au plus fort :",[163,164,165,181],"table",{},[166,167,168],"thead",{},[169,170,171,175,178],"tr",{},[172,173,174],"th",{},"Type de sélecteur",[172,176,177],{},"Poids",[172,179,180],{},"Exemple",[182,183,184,201,216],"tbody",{},[169,185,186,190,193],{},[187,188,189],"td",{},"balise, pseudo-élément",[187,191,192],{},"faible",[187,194,195,197,198],{},[43,196,32],{},", ",[43,199,200],{},"h1",[169,202,203,206,209],{},[187,204,205],{},"classe, pseudo-classe, attribut",[187,207,208],{},"moyen",[187,210,211,197,213],{},[43,212,91],{},[43,214,215],{},"a:hover",[169,217,218,221,224],{},[187,219,220],{},"identifiant",[187,222,223],{},"fort",[187,225,226],{},[43,227,228],{},"#entete",[32,230,231,232,234,235,237],{},"Un seul identifiant l'emporte sur n'importe quel nombre de classes, et une seule classe l'emporte sur n'importe quel nombre de balises. Dans notre exemple, ",[43,233,91],{}," (une classe) bat ",[43,236,32],{}," (une balise).",[32,239,240],{},"Quand un sélecteur en combine plusieurs, on additionne leurs poids dans chaque catégorie :",[36,242,244],{"className":38,"code":243,"language":40,"meta":41,"style":41},".recette p { color: black; }       \u002F* 1 classe, 1 balise *\u002F\n.recette .duree { color: gray; }   \u002F* 2 classes *\u002F\n",[43,245,246,271],{"__ignoreMap":41},[46,247,248,251,254,257,260,262,264,267],{"class":48,"line":49},[46,249,250],{"class":62},".recette",[46,252,253],{"class":52}," p",[46,255,256],{"class":55}," { ",[46,258,259],{"class":62},"color",[46,261,66],{"class":55},[46,263,69],{"class":62},[46,265,266],{"class":55},"; }       ",[46,268,270],{"class":269},"sd6ml","\u002F* 1 classe, 1 balise *\u002F\n",[46,272,273,275,278,280,282,284,286,289],{"class":48,"line":59},[46,274,250],{"class":62},[46,276,277],{"class":62}," .duree",[46,279,256],{"class":55},[46,281,259],{"class":62},[46,283,66],{"class":55},[46,285,103],{"class":62},[46,287,288],{"class":55},"; }   ",[46,290,291],{"class":269},"\u002F* 2 classes *\u002F\n",[32,293,294],{},"La seconde règle gagne : elle compte deux classes contre une classe et une balise.",[10,296,298],{"id":297},"lordre-décriture","L'ordre d'écriture",[32,300,301],{},"À spécificité égale, la dernière règle écrite l'emporte :",[36,303,305],{"className":38,"code":304,"language":40,"meta":41,"style":41},".duree { color: gray; }\n.duree { color: tomato; }\n",[43,306,307,322],{"__ignoreMap":41},[46,308,309,311,313,315,317,319],{"class":48,"line":49},[46,310,91],{"class":62},[46,312,256],{"class":55},[46,314,259],{"class":62},[46,316,66],{"class":55},[46,318,103],{"class":62},[46,320,321],{"class":55},"; }\n",[46,323,324,326,328,330,332,335],{"class":48,"line":59},[46,325,91],{"class":62},[46,327,256],{"class":55},[46,329,259],{"class":62},[46,331,66],{"class":55},[46,333,334],{"class":62},"tomato",[46,336,321],{"class":55},[32,338,339],{},"Le texte sera rouge tomate. Cela vaut aussi entre plusieurs feuilles : la feuille reliée en dernier gagne.",[341,342,343],"tip",{},[32,344,345],{},"Les outils de développement (F12) barrent les déclarations perdantes dans l'onglet « Éléments ». C'est le moyen le plus rapide de comprendre pourquoi ta règle n'a pas d'effet.",[10,347,349],{"id":348},"lhéritage","L'héritage",[32,351,352,353,356,357,197,359,197,362,197,365,368],{},"Certaines propriétés se transmettent des parents aux enfants : c'est l'",[147,354,355],{},"héritage",". Les propriétés de texte (",[43,358,259],{},[43,360,361],{},"font-family",[43,363,364],{},"font-size",[43,366,367],{},"line-height",") sont héritées.",[36,370,372],{"className":38,"code":371,"language":40,"meta":41,"style":41},"body {\n  font-family: Georgia, serif;\n  color: #333;\n}\n",[43,373,374,381,398,409],{"__ignoreMap":41},[46,375,376,379],{"class":48,"line":49},[46,377,378],{"class":52},"body",[46,380,56],{"class":55},[46,382,383,386,388,391,393,396],{"class":48,"line":59},[46,384,385],{"class":62},"  font-family",[46,387,66],{"class":55},[46,389,390],{"class":62},"Georgia",[46,392,197],{"class":55},[46,394,395],{"class":62},"serif",[46,397,72],{"class":55},[46,399,400,402,404,407],{"class":48,"line":75},[46,401,63],{"class":62},[46,403,66],{"class":55},[46,405,406],{"class":62},"#333",[46,408,72],{"class":55},[46,410,411],{"class":48,"line":81},[46,412,78],{"class":55},[32,414,415],{},"Tous les éléments de la page, du titre au lien, reprennent cette police et cette couleur, sans que tu les répètes. Une règle posée sur le parent évite des dizaines de lignes.",[32,417,418,419,422,423,426],{},"Les propriétés de mise en boîte, comme ",[43,420,421],{},"border"," ou ",[43,424,425],{},"margin",", ne sont pas héritées. Imagine le résultat si chaque enfant recopiait la bordure de son parent.",[10,428,430],{"id":429},"forcer-ou-contrôler-lhéritage","Forcer ou contrôler l'héritage",[32,432,433],{},"Quatre mots-clés agissent sur l'héritage et sur la cascade :",[163,435,436,446],{},[166,437,438],{},[169,439,440,443],{},[172,441,442],{},"Mot-clé",[172,444,445],{},"Effet",[182,447,448,458,468,482],{},[169,449,450,455],{},[187,451,452],{},[43,453,454],{},"inherit",[187,456,457],{},"prend la valeur du parent",[169,459,460,465],{},[187,461,462],{},[43,463,464],{},"initial",[187,466,467],{},"revient à la valeur par défaut de la propriété",[169,469,470,475],{},[187,471,472],{},[43,473,474],{},"unset",[187,476,477,479,480],{},[43,478,454],{}," si la propriété est héritée, sinon ",[43,481,464],{},[169,483,484,489],{},[187,485,486],{},[43,487,488],{},"revert",[187,490,491],{},"revient à la valeur du style par défaut du navigateur",[36,493,495],{"className":38,"code":494,"language":40,"meta":41,"style":41},"a {\n  color: inherit;\n}\n",[43,496,497,504,514],{"__ignoreMap":41},[46,498,499,502],{"class":48,"line":49},[46,500,501],{"class":52},"a",[46,503,56],{"class":55},[46,505,506,508,510,512],{"class":48,"line":59},[46,507,63],{"class":62},[46,509,66],{"class":55},[46,511,454],{"class":62},[46,513,72],{"class":55},[46,515,516],{"class":48,"line":75},[46,517,78],{"class":55},[32,519,520],{},"Les liens reprennent maintenant la couleur de leur parent au lieu du bleu habituel.",[10,522,524],{"id":523},"important-la-sortie-de-secours","!important : la sortie de secours",[32,526,527,528,531],{},"Ajouter ",[43,529,530],{},"!important"," à une déclaration la place au-dessus des autres :",[36,533,535],{"className":38,"code":534,"language":40,"meta":41,"style":41},".duree {\n  color: gray !important;\n}\n",[43,536,537,543,557],{"__ignoreMap":41},[46,538,539,541],{"class":48,"line":49},[46,540,91],{"class":62},[46,542,56],{"class":55},[46,544,545,547,549,551,555],{"class":48,"line":59},[46,546,63],{"class":62},[46,548,66],{"class":55},[46,550,103],{"class":62},[46,552,554],{"class":553},"sOnC1"," !important",[46,556,72],{"class":55},[46,558,559],{"class":48,"line":75},[46,560,78],{"class":55},[562,563,564],"warning",{},[32,565,566,567,569,570,572],{},"Évite ",[43,568,530],{},". Il casse la logique de la cascade, et la seule façon de le contredire est un autre ",[43,571,530],{}," plus précis. Tu te retrouves vite avec un fichier impossible à relire. Préfère alléger le sélecteur ou mieux ordonner tes règles.",[10,574,576],{"id":575},"écrire-du-css-qui-se-comporte-bien","Écrire du CSS qui se comporte bien",[32,578,579],{},"Quelques habitudes évitent presque tous les conflits.",[581,582,583,586,589,592,595],"ol",{},[18,584,585],{},"Style surtout avec des classes : leur poids est moyen et prévisible.",[18,587,588],{},"Évite les identifiants dans le CSS : leur poids est difficile à surpasser.",[18,590,591],{},"Garde des sélecteurs courts, deux ou trois niveaux au plus.",[18,593,594],{},"Mets les règles générales d'abord, les règles particulières ensuite.",[18,596,597,598,600],{},"Pose les réglages de texte sur ",[43,599,378],{}," et laisse l'héritage faire le reste.",[32,602,603],{},"Si une règle semble ignorée, cherche d'abord une règle plus spécifique, puis une règle plus tardive, puis une propriété mal orthographiée.",[605,606,607],"note",{},[32,608,609,610,613,614,617],{},"La cascade a une quatrième couche que tu verras plus tard avec les grands projets : les ",[147,611,612],{},"couches"," (",[43,615,616],{},"@layer","), qui permettent d'ordonner des groupes de règles. Tu n'en as pas besoin pour débuter.",[10,619,621],{"id":620},"à-retenir","À retenir",[15,623,624,627,630,633,642,653],{},[18,625,626],{},"La cascade départage les règles par importance, spécificité, puis ordre d'écriture.",[18,628,629],{},"Spécificité croissante : balise, puis classe, puis identifiant.",[18,631,632],{},"À spécificité égale, la dernière règle écrite gagne.",[18,634,635,636,638,639,641],{},"Les propriétés de texte sont héritées, ",[43,637,421],{}," et ",[43,640,425],{}," ne le sont pas.",[18,643,644,197,646,197,648,638,650,652],{},[43,645,454],{},[43,647,464],{},[43,649,474],{},[43,651,488],{}," contrôlent l'héritage.",[18,654,566,655,657],{},[43,656,530],{}," et les identifiants : préfère des classes simples.",[659,660,661],"style",{},"html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}",{"title":41,"searchDepth":59,"depth":75,"links":663},[664,665,666,667,668,669,670,671,672],{"id":12,"depth":59,"text":13},{"id":29,"depth":59,"text":30},{"id":153,"depth":59,"text":154},{"id":297,"depth":59,"text":298},{"id":348,"depth":59,"text":349},{"id":429,"depth":59,"text":430},{"id":523,"depth":59,"text":524},{"id":575,"depth":59,"text":576},{"id":620,"depth":59,"text":621},"Comprendre pourquoi une règle CSS l'emporte sur une autre grâce à la spécificité, à l'ordre d'écriture et à l'héritage.","md",{},[149,160,355,530,677,454,678,679],"conflit de règles","ordre des règles","outils de développement","debutant","\u002Fcss\u002Fcascade-et-specificite",[683],"\u002Fcss\u002Fpremiers-pas",[685,689],{"nom":686,"url":687,"type":688},"MDN, Gérer les conflits","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStyling_basics\u002FHandling_conflicts","cours",{"nom":690,"url":691,"type":688},"MDN, Les bases du style","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStyling_basics",{"title":5,"description":673},[694],{"nom":686,"url":687},"css\u002F02.cascade-et-specificite","Lv_49cGxc2DukoCAjGlg1yvNm2vWyFvb8SUHItqJMAQ",[698,701,702,706,710,714,718],{"path":683,"title":699,"stem":700},"Premiers pas en CSS","css\u002F01.premiers-pas",{"path":681,"title":5,"stem":695},{"path":703,"title":704,"stem":705},"\u002Fcss\u002Fboites-et-texte","Boîtes, unités et texte","css\u002F03.boites-et-texte",{"path":707,"title":708,"stem":709},"\u002Fcss\u002Fflexbox","Flexbox","css\u002F04.flexbox",{"path":711,"title":712,"stem":713},"\u002Fcss\u002Fgrid-et-responsive","Grid et responsive","css\u002F05.grid-et-responsive",{"path":715,"title":716,"stem":717},"\u002Fcss\u002Fvariables-et-animations","Variables, transitions et animations","css\u002F06.variables-et-animations",{"path":719,"title":720,"stem":721},"\u002Fcss","CSS","css\u002Findex",[723,725],{"title":699,"path":683,"stem":700,"description":724,"children":-1},"Relier une feuille de style à une page HTML, écrire des règles avec sélecteurs et propriétés, et comprendre les premières couleurs.",{"title":704,"path":703,"stem":705,"description":726,"children":-1},"Le modèle de boîte (margin, border, padding, box-sizing), les unités de longueur et la typographie de base.",[728],{"path":683,"title":699,"ligne":40},[730,731,732,733,735,736,738],{"path":683,"title":699,"niveau":680,"stem":700},{"path":681,"title":5,"niveau":680,"stem":695},{"path":703,"title":704,"niveau":680,"stem":705},{"path":707,"title":708,"niveau":734,"stem":709},"intermediaire",{"path":711,"title":712,"niveau":734,"stem":713},{"path":715,"title":716,"niveau":737,"stem":717},"avance",{"path":719,"title":720,"niveau":739,"stem":721},"memo",1794583446867]