[{"data":1,"prerenderedAt":971},["ShallowReactive",2],{"page-\u002Fcss\u002F02-selectors-and-specificity":3},{"id":4,"title":5,"body":6,"description":963,"extension":964,"meta":965,"navigation":966,"path":967,"seo":968,"stem":969,"__hash__":970},"content\u002Fcss\u002F02-selectors-and-specificity.md","02 — Selectors, Specificity & the Cascade Algorithm",{"type":7,"value":8,"toc":951},"minimark",[9,13,22,27,235,239,325,329,334,412,492,510,514,568,572,683,687,751,755,880,884,921,947],[10,11,5],"h1",{"id":12},"_02-selectors-specificity-the-cascade-algorithm",[14,15,16,17,21],"p",{},"The cascade is an algorithm, not a vibe. When N rules match an element, the engine computes a winner in this order: ",[18,19,20],"strong",{},"origin\u002Fimportance → cascade layer → specificity → source order → inheritance → initial value",". Misunderstanding any tier produces \"why isn't my style applying?\" Every selector you write is a specificity budget — spend it flat.",[23,24,26],"h2",{"id":25},"selector-inventory-with-specificity-cost","Selector Inventory — with specificity cost",[28,29,31],"code-wrapper",{"language":30},"css",[32,33,37],"pre",{"className":34,"code":35,"language":30,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark","\u002F* specificity (a,b,c,d): a=style attr, b=ID count, c=class\u002Fattr\u002Fpseudo-class, d=type\u002Fpseudo-element *\u002F\n*                  { } \u002F* (0,0,0,0) — universal: matches all, zero specificity. Safe for resets. *\u002F\np                  { } \u002F* (0,0,0,1) — type *\u002F\n.highlight         { } \u002F* (0,0,1,0) — class (the production workhorse) *\u002F\n[type=\"text\"]      { } \u002F* (0,0,1,0) — attribute selector *\u002F\na[href^=\"https\"]   { } \u002F* (0,0,1,1) — attr + type; ^= starts-with, $= ends-with, *= contains *\u002F\n#header            { } \u002F* (0,1,0,0) — ID: avoid for styling (unoverridable by classes) *\u002F\np::before          { } \u002F* (0,0,0,2) — pseudo-element counts as a type *\u002F\np:hover            { } \u002F* (0,0,1,0) — pseudo-class counts as a class *\u002F\n:is(.a, #b, p)     { } \u002F* takes the HIGHEST specificity in the list → (0,1,0,1) *\u002F\n:where(.a, #b)     { } \u002F* always (0,0,0,0) — zero-specificity grouping, the override-friendly :is *\u002F\n:not(.error)       { } \u002F* specificity of the ARGUMENT → (0,0,1,0), not of :not itself *\u002F\n","",[38,39,40,49,63,73,86,109,132,144,158,171,199,218],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sdCPZ","\u002F* specificity (a,b,c,d): a=style attr, b=ID count, c=class\u002Fattr\u002Fpseudo-class, d=type\u002Fpseudo-element *\u002F\n",[41,50,52,56,60],{"class":43,"line":51},2,[41,53,55],{"class":54},"sk71V","*",[41,57,59],{"class":58},"ssxIu","                  { } ",[41,61,62],{"class":47},"\u002F* (0,0,0,0) — universal: matches all, zero specificity. Safe for resets. *\u002F\n",[41,64,66,68,70],{"class":43,"line":65},3,[41,67,14],{"class":54},[41,69,59],{"class":58},[41,71,72],{"class":47},"\u002F* (0,0,0,1) — type *\u002F\n",[41,74,76,80,83],{"class":43,"line":75},4,[41,77,79],{"class":78},"sIsaT",".highlight",[41,81,82],{"class":58},"         { } ",[41,84,85],{"class":47},"\u002F* (0,0,1,0) — class (the production workhorse) *\u002F\n",[41,87,89,92,95,99,103,106],{"class":43,"line":88},5,[41,90,91],{"class":58},"[",[41,93,94],{"class":78},"type",[41,96,98],{"class":97},"svdQ7","=",[41,100,102],{"class":101},"sJ6F3","\"text\"",[41,104,105],{"class":58},"]      { } ",[41,107,108],{"class":47},"\u002F* (0,0,1,0) — attribute selector *\u002F\n",[41,110,112,115,117,120,123,126,129],{"class":43,"line":111},6,[41,113,114],{"class":54},"a",[41,116,91],{"class":58},[41,118,119],{"class":78},"href",[41,121,122],{"class":97},"^=",[41,124,125],{"class":101},"\"https\"",[41,127,128],{"class":58},"]   { } ",[41,130,131],{"class":47},"\u002F* (0,0,1,1) — attr + type; ^= starts-with, $= ends-with, *= contains *\u002F\n",[41,133,135,138,141],{"class":43,"line":134},7,[41,136,137],{"class":78},"#header",[41,139,140],{"class":58},"            { } ",[41,142,143],{"class":47},"\u002F* (0,1,0,0) — ID: avoid for styling (unoverridable by classes) *\u002F\n",[41,145,147,149,152,155],{"class":43,"line":146},8,[41,148,14],{"class":54},[41,150,151],{"class":78},"::before",[41,153,154],{"class":58},"          { } ",[41,156,157],{"class":47},"\u002F* (0,0,0,2) — pseudo-element counts as a type *\u002F\n",[41,159,161,163,166,168],{"class":43,"line":160},9,[41,162,14],{"class":54},[41,164,165],{"class":78},":hover",[41,167,140],{"class":58},[41,169,170],{"class":47},"\u002F* (0,0,1,0) — pseudo-class counts as a class *\u002F\n",[41,172,174,177,180,183,186,189,191,193,196],{"class":43,"line":173},10,[41,175,176],{"class":78},":is",[41,178,179],{"class":58},"(",[41,181,182],{"class":78},".a",[41,184,185],{"class":58},", ",[41,187,188],{"class":78},"#b",[41,190,185],{"class":58},[41,192,14],{"class":54},[41,194,195],{"class":58},")     { } ",[41,197,198],{"class":47},"\u002F* takes the HIGHEST specificity in the list → (0,1,0,1) *\u002F\n",[41,200,202,205,207,209,211,213,215],{"class":43,"line":201},11,[41,203,204],{"class":78},":where",[41,206,179],{"class":58},[41,208,182],{"class":78},[41,210,185],{"class":58},[41,212,188],{"class":78},[41,214,195],{"class":58},[41,216,217],{"class":47},"\u002F* always (0,0,0,0) — zero-specificity grouping, the override-friendly :is *\u002F\n",[41,219,221,224,226,229,232],{"class":43,"line":220},12,[41,222,223],{"class":78},":not",[41,225,179],{"class":58},[41,227,228],{"class":78},".error",[41,230,231],{"class":58},")       { } ",[41,233,234],{"class":47},"\u002F* specificity of the ARGUMENT → (0,0,1,0), not of :not itself *\u002F\n",[23,236,238],{"id":237},"combinators-and-what-they-cost-the-engine","Combinators — and what they cost the engine",[28,240,241],{"language":30},[32,242,244],{"className":34,"code":243,"language":30,"meta":36,"style":36},"\u002F* The engine matches RIGHT-TO-LEFT. The rightmost selector is the \"key\" —\n   the engine finds all key matches, then walks UP the DOM checking ancestors.\n   Deep descendant chains = O(depth) per key match. BEM's flat single-class\n   selectors are O(1) by comparison. *\u002F\narticle p            { } \u002F* descendant: any \u003Cp> at any depth under \u003Carticle> *\u002F\nul > li              { } \u002F* child: direct children only — tighter, faster *\u002F\nh1 + p               { } \u002F* adjacent sibling: the \u003Cp> immediately after \u003Ch1> *\u002F\nh1 ~ p               { } \u002F* general sibling: any \u003Cp> after \u003Ch1>, not nested *\u002F\n",[38,245,246,251,256,261,266,279,296,311],{"__ignoreMap":36},[41,247,248],{"class":43,"line":44},[41,249,250],{"class":47},"\u002F* The engine matches RIGHT-TO-LEFT. The rightmost selector is the \"key\" —\n",[41,252,253],{"class":43,"line":51},[41,254,255],{"class":47},"   the engine finds all key matches, then walks UP the DOM checking ancestors.\n",[41,257,258],{"class":43,"line":65},[41,259,260],{"class":47},"   Deep descendant chains = O(depth) per key match. BEM's flat single-class\n",[41,262,263],{"class":43,"line":75},[41,264,265],{"class":47},"   selectors are O(1) by comparison. *\u002F\n",[41,267,268,271,274,276],{"class":43,"line":88},[41,269,270],{"class":54},"article",[41,272,273],{"class":54}," p",[41,275,140],{"class":58},[41,277,278],{"class":47},"\u002F* descendant: any \u003Cp> at any depth under \u003Carticle> *\u002F\n",[41,280,281,284,287,290,293],{"class":43,"line":111},[41,282,283],{"class":54},"ul",[41,285,286],{"class":97}," >",[41,288,289],{"class":54}," li",[41,291,292],{"class":58},"              { } ",[41,294,295],{"class":47},"\u002F* child: direct children only — tighter, faster *\u002F\n",[41,297,298,300,303,305,308],{"class":43,"line":134},[41,299,10],{"class":54},[41,301,302],{"class":97}," +",[41,304,273],{"class":54},[41,306,307],{"class":58},"               { } ",[41,309,310],{"class":47},"\u002F* adjacent sibling: the \u003Cp> immediately after \u003Ch1> *\u002F\n",[41,312,313,315,318,320,322],{"class":43,"line":146},[41,314,10],{"class":54},[41,316,317],{"class":97}," ~",[41,319,273],{"class":54},[41,321,307],{"class":58},[41,323,324],{"class":47},"\u002F* general sibling: any \u003Cp> after \u003Ch1>, not nested *\u002F\n",[23,326,328],{"id":327},"the-specificity-trap-and-the-production-escape","The Specificity Trap — and the production escape",[330,331,333],"h3",{"id":332},"anti-pattern-id-selectors-start-an-arms-race","Anti-pattern: ID selectors start an arms race",[28,335,336],{"language":30},[32,337,339],{"className":34,"code":338,"language":30,"meta":36,"style":36},"\u002F* ❌ Once you use #id, classes can NEVER override it. You're forced into !important or more IDs. *\u002F\n#sidebar .btn { background: blue; }   \u002F* (0,1,1,0) *\u002F\n.btn { background: green; }           \u002F* (0,0,1,0) — loses forever, even with source order *\u002F\n.btn.green { background: green; }     \u002F* (0,0,2,0) — still loses: 1 ID > any number of classes *\u002F\n",[38,340,341,346,373,393],{"__ignoreMap":36},[41,342,343],{"class":43,"line":44},[41,344,345],{"class":47},"\u002F* ❌ Once you use #id, classes can NEVER override it. You're forced into !important or more IDs. *\u002F\n",[41,347,348,351,354,357,361,364,367,370],{"class":43,"line":51},[41,349,350],{"class":78},"#sidebar",[41,352,353],{"class":78}," .btn",[41,355,356],{"class":58}," { ",[41,358,360],{"class":359},"snvgF","background",[41,362,363],{"class":58},": ",[41,365,366],{"class":359},"blue",[41,368,369],{"class":58},"; }   ",[41,371,372],{"class":47},"\u002F* (0,1,1,0) *\u002F\n",[41,374,375,378,380,382,384,387,390],{"class":43,"line":65},[41,376,377],{"class":78},".btn",[41,379,356],{"class":58},[41,381,360],{"class":359},[41,383,363],{"class":58},[41,385,386],{"class":359},"green",[41,388,389],{"class":58},"; }           ",[41,391,392],{"class":47},"\u002F* (0,0,1,0) — loses forever, even with source order *\u002F\n",[41,394,395,398,400,402,404,406,409],{"class":43,"line":75},[41,396,397],{"class":78},".btn.green",[41,399,356],{"class":58},[41,401,360],{"class":359},[41,403,363],{"class":58},[41,405,386],{"class":359},[41,407,408],{"class":58},"; }     ",[41,410,411],{"class":47},"\u002F* (0,0,2,0) — still loses: 1 ID > any number of classes *\u002F\n",[28,413,414],{"language":30},[32,415,417],{"className":34,"code":416,"language":30,"meta":36,"style":36},"\u002F* ✓ PRODUCTION — flat class selectors + cascade layers. No IDs for styling. *\u002F\n@layer components, overrides;\n@layer components {\n  .sidebar__btn { background: blue; }   \u002F* (0,0,1,0) in `components` layer *\u002F\n}\n@layer overrides {\n  .sidebar__btn--green { background: green; }  \u002F* later layer wins regardless of specificity *\u002F\n}\n",[38,418,419,424,432,439,457,462,469,488],{"__ignoreMap":36},[41,420,421],{"class":43,"line":44},[41,422,423],{"class":47},"\u002F* ✓ PRODUCTION — flat class selectors + cascade layers. No IDs for styling. *\u002F\n",[41,425,426,429],{"class":43,"line":51},[41,427,428],{"class":97},"@layer",[41,430,431],{"class":58}," components, overrides;\n",[41,433,434,436],{"class":43,"line":65},[41,435,428],{"class":97},[41,437,438],{"class":58}," components {\n",[41,440,441,444,446,448,450,452,454],{"class":43,"line":75},[41,442,443],{"class":78},"  .sidebar__btn",[41,445,356],{"class":58},[41,447,360],{"class":359},[41,449,363],{"class":58},[41,451,366],{"class":359},[41,453,369],{"class":58},[41,455,456],{"class":47},"\u002F* (0,0,1,0) in `components` layer *\u002F\n",[41,458,459],{"class":43,"line":88},[41,460,461],{"class":58},"}\n",[41,463,464,466],{"class":43,"line":111},[41,465,428],{"class":97},[41,467,468],{"class":58}," overrides {\n",[41,470,471,474,476,478,480,482,485],{"class":43,"line":134},[41,472,473],{"class":78},"  .sidebar__btn--green",[41,475,356],{"class":58},[41,477,360],{"class":359},[41,479,363],{"class":58},[41,481,386],{"class":359},[41,483,484],{"class":58},"; }  ",[41,486,487],{"class":47},"\u002F* later layer wins regardless of specificity *\u002F\n",[41,489,490],{"class":43,"line":146},[41,491,461],{"class":58},[14,493,494,497,498,500,501,505,506,509],{},[18,495,496],{},"Why:"," ",[38,499,428],{}," makes precedence a ",[502,503,504],"em",{},"declared order",", not a specificity shootout. A utility in the last layer beats a component in an earlier layer at (0,0,1,0) vs (0,0,10,0) — specificity is irrelevant ",[502,507,508],{},"across"," layers.",[23,511,513],{"id":512},"cascade-layers-in-practice-taming-third-party-css","Cascade Layers in Practice — taming third-party CSS",[28,515,516],{"language":30},[32,517,519],{"className":34,"code":518,"language":30,"meta":36,"style":36},"@layer reset, third-party, base, components, utilities;\n\u002F* third-party (framework, design system) is an EARLY layer → your base\u002Fcomponents override it\n   for FREE, no matter how specific their selectors are. The end of !important wars. *\u002F\n@layer third-party {\n  @import url(\"bootstrap.css\") layer(framework);  \u002F* if you must @import, scope it to a layer *\u002F\n}\n",[38,520,521,528,533,538,545,564],{"__ignoreMap":36},[41,522,523,525],{"class":43,"line":44},[41,524,428],{"class":97},[41,526,527],{"class":58}," reset, third-party, base, components, utilities;\n",[41,529,530],{"class":43,"line":51},[41,531,532],{"class":47},"\u002F* third-party (framework, design system) is an EARLY layer → your base\u002Fcomponents override it\n",[41,534,535],{"class":43,"line":65},[41,536,537],{"class":47},"   for FREE, no matter how specific their selectors are. The end of !important wars. *\u002F\n",[41,539,540,542],{"class":43,"line":75},[41,541,428],{"class":97},[41,543,544],{"class":58}," third-party {\n",[41,546,547,550,553,555,558,561],{"class":43,"line":88},[41,548,549],{"class":97},"  @import",[41,551,552],{"class":359}," url",[41,554,179],{"class":58},[41,556,557],{"class":101},"\"bootstrap.css\"",[41,559,560],{"class":58},") layer(framework);  ",[41,562,563],{"class":47},"\u002F* if you must @import, scope it to a layer *\u002F\n",[41,565,566],{"class":43,"line":111},[41,567,461],{"class":58},[23,569,571],{"id":570},"inheritance-vs-non-inherited-properties","Inheritance vs Non-Inherited Properties",[28,573,574],{"language":30},[32,575,577],{"className":34,"code":576,"language":30,"meta":36,"style":36},"body { color: #333; border: 1px solid black; }\n\u002F* `color` INHERITS → every descendant text node gets #333 unless overridden.\n   `border` does NOT inherit → only \u003Cbody> gets a border. *\u002F\n.card { border: inherit; }    \u002F* explicitly inherit a non-inherited property *\u002F\n.badge { all: revert; }       \u002F* reset EVERYTHING to UA defaults (nuclear) *\u002F\n\u002F* unset  = inherit if the property is inheritable, else initial.\n   revert = UA default (not the spec initial — e.g. `display: revert` → inline for \u003Cspan>).\n   initial = the spec's initial value (display: initial → inline for everything). *\u002F\n",[38,578,579,617,622,627,647,668,673,678],{"__ignoreMap":36},[41,580,581,584,586,589,591,594,597,600,602,605,608,611,614],{"class":43,"line":44},[41,582,583],{"class":54},"body",[41,585,356],{"class":58},[41,587,588],{"class":359},"color",[41,590,363],{"class":58},[41,592,593],{"class":359},"#333",[41,595,596],{"class":58},"; ",[41,598,599],{"class":359},"border",[41,601,363],{"class":58},[41,603,604],{"class":359},"1",[41,606,607],{"class":97},"px",[41,609,610],{"class":359}," solid",[41,612,613],{"class":359}," black",[41,615,616],{"class":58},"; }\n",[41,618,619],{"class":43,"line":51},[41,620,621],{"class":47},"\u002F* `color` INHERITS → every descendant text node gets #333 unless overridden.\n",[41,623,624],{"class":43,"line":65},[41,625,626],{"class":47},"   `border` does NOT inherit → only \u003Cbody> gets a border. *\u002F\n",[41,628,629,632,634,636,638,641,644],{"class":43,"line":75},[41,630,631],{"class":78},".card",[41,633,356],{"class":58},[41,635,599],{"class":359},[41,637,363],{"class":58},[41,639,640],{"class":359},"inherit",[41,642,643],{"class":58},"; }    ",[41,645,646],{"class":47},"\u002F* explicitly inherit a non-inherited property *\u002F\n",[41,648,649,652,654,657,659,662,665],{"class":43,"line":88},[41,650,651],{"class":78},".badge",[41,653,356],{"class":58},[41,655,656],{"class":359},"all",[41,658,363],{"class":58},[41,660,661],{"class":359},"revert",[41,663,664],{"class":58},"; }       ",[41,666,667],{"class":47},"\u002F* reset EVERYTHING to UA defaults (nuclear) *\u002F\n",[41,669,670],{"class":43,"line":111},[41,671,672],{"class":47},"\u002F* unset  = inherit if the property is inheritable, else initial.\n",[41,674,675],{"class":43,"line":134},[41,676,677],{"class":47},"   revert = UA default (not the spec initial — e.g. `display: revert` → inline for \u003Cspan>).\n",[41,679,680],{"class":43,"line":146},[41,681,682],{"class":47},"   initial = the spec's initial value (display: initial → inline for everything). *\u002F\n",[23,684,686],{"id":685},"tips-tricks","💡 Tips & Tricks",[283,688,689,718,727,740],{},[690,691,692,695,696,699,700,703,704,706,707,710,711,714,715,717],"li",{},[18,693,694],{},"Idiom",": use ",[38,697,698],{},":where()"," for zero-specificity grouping — ",[38,701,702],{},".card :where(h1, h2, h3) { }"," styles headings inside ",[38,705,631],{}," at specificity (0,0,1,0), so a single ",[38,708,709],{},".prose-h2"," class can override it. ",[38,712,713],{},":is()"," would hoist ",[38,716,23],{},"'s type specificity into the group.",[690,719,720,722,723,726],{},[18,721,694],{},": use BEM (",[38,724,725],{},".block__element--modifier",") to keep every selector at (0,0,1,0) — flat specificity means source order and layers are the only precedence levers, exactly as intended.",[690,728,729,731,732,735,736,739],{},[18,730,694],{},": reserve IDs for JS hooks (",[38,733,734],{},"#submit-btn",") and fragment links, never styling. If you must target an ID, wrap it: ",[38,737,738],{},".app #header"," is still (0,1,1,0) — better to refactor to a class.",[690,741,742,363,744,746,747,750],{},[18,743,694],{},[38,745,428],{}," is the modern specificity strategy — declare order once, put utilities last, and you never need ",[38,748,749],{},"!important"," or chained selectors for overrides.",[23,752,754],{"id":753},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[283,756,757,763,788,807,830,846],{},[690,758,759,762],{},[18,760,761],{},"Specificity is NOT decimal",": (0,0,10,0) does not \"roll over\" to (0,1,0,0). Ten classes still lose to one ID. Compare each column independently, left-to-right.",[690,764,765,770,771,773,774,777,778,781,782,497,785,787],{},[18,766,767,769],{},[38,768,749],{}," reverses origin but keeps specificity",": two ",[38,772,749],{}," rules compete by specificity. ",[38,775,776],{},"#x { color: red !important }"," beats ",[38,779,780],{},".a.b.c { color: blue !important }",". It's a trap that forces ",[502,783,784],{},"more",[38,786,749],{},".",[690,789,790,363,796,799,800,803,804,806],{},[18,791,792,795],{},[38,793,794],{},":not()"," takes its argument's specificity",[38,797,798],{},":not(.x)"," is (0,0,1,0), ",[38,801,802],{},":not(#x)"," is (0,1,0,0). A ",[38,805,794],{}," with an ID inside is an ID-strength selector.",[690,808,809,812,813,816,817,777,819,821,822,825,826,829],{},[18,810,811],{},"Unlayered rules beat ALL layered rules",": a bare ",[38,814,815],{},".btn { }"," outside ",[38,818,428],{},[38,820,815],{}," in ",[38,823,824],{},"@layer utilities",". This is the escape hatch — and the reason to layer ",[502,827,828],{},"everything"," or nothing.",[690,831,832,838,839,841,842,845],{},[18,833,834,835,837],{},"Pseudo-elements (",[38,836,151],{},") count as a type"," (0,0,0,1); pseudo-classes (",[38,840,165],{},") count as a class (0,0,1,0). ",[38,843,844],{},"p::first-line:hover"," is (0,0,1,2).",[690,847,848,363,862,865,866,869,870,872,873,875,876,879],{},[18,849,850,852,853,852,856,852,859,861],{},[38,851,640],{},"\u002F",[38,854,855],{},"initial",[38,857,858],{},"unset",[38,860,661],{}," are values, not properties",[38,863,864],{},"color: revert"," resets to UA default; ",[38,867,868],{},"all: unset"," nukes everything. ",[38,871,661],{}," ≠ ",[38,874,855],{}," for UA-styled elements (",[38,877,878],{},"\u003Cbutton>",").",[23,881,883],{"id":882},"spot-the-bug","🧠 Spot the Bug",[28,885,886],{"language":30},[32,887,889],{"className":34,"code":888,"language":30,"meta":36,"style":36},"#sidebar .btn { background: blue; }\n.btn { background: green; }\n",[38,890,891,907],{"__ignoreMap":36},[41,892,893,895,897,899,901,903,905],{"class":43,"line":44},[41,894,350],{"class":78},[41,896,353],{"class":78},[41,898,356],{"class":58},[41,900,360],{"class":359},[41,902,363],{"class":58},[41,904,366],{"class":359},[41,906,616],{"class":58},[41,908,909,911,913,915,917,919],{"class":43,"line":51},[41,910,377],{"class":78},[41,912,356],{"class":58},[41,914,360],{"class":359},[41,916,363],{"class":58},[41,918,386],{"class":359},[41,920,616],{"class":58},[922,923,924,928],"details",{},[925,926,927],"summary",{},"Answer",[14,929,930,933,934,936,937,939,940,943,944,946],{},[38,931,932],{},"#sidebar .btn"," is (0,1,1,0); ",[38,935,377],{}," is (0,0,1,0). Specificity beats source order, so the button stays blue. Ten ",[38,938,377],{},"-class rules stacked later still lose. Fix: remove the ID (",[38,941,942],{},"--sidebar"," as a class → (0,0,2,0), overridable by adding a class) or use ",[38,945,428],{}," to declare precedence by layer, not specificity. The root cause: an ID in a selector makes it unoverridable by the class-based architecture the rest of the codebase uses.",[948,949,950],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}",{"title":36,"searchDepth":51,"depth":51,"links":952},[953,954,955,958,959,960,961,962],{"id":25,"depth":51,"text":26},{"id":237,"depth":51,"text":238},{"id":327,"depth":51,"text":328,"children":956},[957],{"id":332,"depth":65,"text":333},{"id":512,"depth":51,"text":513},{"id":570,"depth":51,"text":571},{"id":685,"depth":51,"text":686},{"id":753,"depth":51,"text":754},{"id":882,"depth":51,"text":883},"Selector matching is right-to-left, specificity is a 4-tuple compared column-wise, and the cascade is origin→layer→specificity→order→inheritance. Code-first reference with cascade-layer architecture and the specificity arms-race anti-pattern.","md",{},true,"\u002Fcss\u002F02-selectors-and-specificity",{"title":5,"description":963},"css\u002F02-selectors-and-specificity","pkCSj5zc1HLpZZyisZsCs9HOrLZ1xPdho8RRWDdk5io",1789924644819]