DirtySanchez
New Member
Which class selector rules have a higher specificity for 10 marks?\[code\].A.E.F .C .D\[/code\]OR\[code\].A .B .C span\[/code\]HTML:\[code\]<div class="A E F"> <div class="B"> <div class="C"> <div class="D"> <span>17590</span> <span>Points</span> </div> </div> </div></div>\[/code\]CSS:\[code\].A.E.F .C .D /* span */ { font-size: 1em;}.A .B .C span { font-size: .95em;}\[/code\]Here is a JS fiddle demonstrating the issue: http://jsfiddle.net/UgkZY/I would have thought that the first rule would win. 5 x classes as opposed to 3 x classes + 1 x type. However, the second rule wins out as the .A.E.F appears to only score as 1 class.If I use the following on-line CSS specificity calculator, http://specificity.keegan.st/, it thinks that the first rule is going to win. In reality, in the Chrome browser, the second one wins.Can someone clarify that .A.B.C is indeed considered just one class in terms of CSS specificity?BTW, if I add a span selector to the first rule it will win out.According to the CSS specification to me it looks like the first one should win.http://www.w3.org/TR/selectors/#specificity\[quote\] LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */\[/quote\]Very confusing I must say.