[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"tool-content-en-css-specificity-calculator":3},{"id":4,"title":5,"body":6,"description":174,"extension":175,"locale":176,"meta":177,"navigation":178,"path":179,"seo":180,"stem":181,"toolId":12,"__hash__":182},"tools\u002Ftools\u002Fen\u002Fcss-specificity-calculator.md","CSS Specificity Calculator",{"type":7,"value":8,"toc":168},"minimark",[9,13,17,135,139,142,165],[10,11,5],"h2",{"id":12},"css-specificity-calculator",[14,15,16],"p",{},"Paste one selector per line and the tool scores each one, sorts them by cascade\norder, and explains where the weight comes from.",[18,19,20,51,100,124],"ul",{},[21,22,23,24,28,29,33,34,37,38,41,42,44,45,47,48,50],"li",{},"Every selector is counted as an ",[25,26,27],"strong",{},"(a, b, c)"," tuple: ",[30,31,32],"code",{},"a"," counts id selectors,\n",[30,35,36],{},"b"," counts classes, attributes and pseudo-classes, and ",[30,39,40],{},"c"," counts type selectors\nand pseudo-elements. ",[30,43,32],{}," is compared first, then ",[30,46,36],{},", then ",[30,49,40],{},".",[21,52,53,56,57,56,60,56,63,56,66,69,70,73,74,77,78,81,82,84,85,87,88,91,92,95,96,99],{},[30,54,55],{},":is()",", ",[30,58,59],{},":not()",[30,61,62],{},":has()",[30,64,65],{},":host()",[30,67,68],{},":host-context()"," and the ",[30,71,72],{},"of"," list of\n",[30,75,76],{},":nth-child()"," take the specificity of their ",[25,79,80],{},"most specific argument",", plus the\npseudo-class itself for ",[30,83,65],{}," and ",[30,86,68],{},". ",[30,89,90],{},"::slotted()"," counts as\none pseudo-element ",[25,93,94],{},"plus"," its argument. ",[30,97,98],{},":where()"," always contributes\nnothing, even when its argument is an id.",[21,101,102,103,106,107,56,110,56,113,56,116,119,120,123],{},"The universal selector ",[30,104,105],{},"*",", combinators (space, ",[30,108,109],{},">",[30,111,112],{},"+",[30,114,115],{},"~",[30,117,118],{},"||",") and the\nnesting selector ",[30,121,122],{},"&"," add no weight.",[21,125,126,127,130,131,134],{},"Selector lists split by commas are scored as separate selectors. Blank lines and\n",[30,128,129],{},"\u002F* comments *\u002F"," are ignored, and a trailing ",[30,132,133],{},"!important"," is flagged separately.",[10,136,138],{"id":137},"reading-the-result","Reading the result",[14,140,141],{},"The list is sorted from the rule that wins to the one that loses. Rules that share\nthe same weight are marked as tied, and because specificity cannot separate them,\nthe later rule wins in source order.",[14,143,144,146,147,150,151,153,154,156,157,160,161,164],{},[30,145,133],{}," and inline styles are ",[25,148,149],{},"not"," part of ",[30,152,27],{},": ",[30,155,133],{},"\noutranks inline styles, which in turn outrank plain selectors. Turn on\n",[25,158,159],{},"Compare against inline style"," to add the ",[30,162,163],{},"(1,0,0,0)"," inline entry to the ranking.",[14,166,167],{},"Everything runs locally in your browser. Nothing is uploaded and no URL parameters\nare written.",{"title":169,"searchDepth":170,"depth":170,"links":171},"",2,[172,173],{"id":12,"depth":170,"text":5},{"id":137,"depth":170,"text":138},"Paste CSS selectors to calculate their (a,b,c) specificity, rank which rule wins the cascade, and see what each part contributes.","md","en",{},true,"\u002Ftools\u002Fen\u002Fcss-specificity-calculator",{"title":5,"description":174},"tools\u002Fen\u002Fcss-specificity-calculator","wc1R4B9E5MRmBkN5pLnFXyQMYvn4tsSJBKwT2fj_IlA",1792391416966]