Why doesn't specificity formula work for ten enclosed tags?
css, css-selectors, html, w3c
Solution
See these rules from CSS Tricks:
For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
For each element reference, apply 0,0,0,1 point
https://css-tricks.com/specifics-on-css-specificity/
Therefore your first example has 0,0,1,0 points. Whereas your second has 0,0,0,12 points.
0,0,1,0 > 0,0,0,12
Basically it doesn't matter how many elements you have referenced in your selector, if you don't have an ID or class referenced then your class selector will always win.
CSS Tricks
Problem
According to the specification, second rule has more specificity and text must be blue, but it's red. ``` /** specificity = 10 */ .my{ background-color: red; } /** specificity = 12 */ html body div b i strong em span font strike ul li{ background-color: blue; } ``` ``` <html> <body> <div> <b><i><strong><em><span><font><strike><ul><li class="my">SUPER</li></ul></strike></font></span></em></strong></i></b> </div> </body> </html> ```