2

I know that to calculate the specificity of a selector we use three numbers, where first number on the left is number of IDs, second number represents number of classes, pseudo-classes and attributes and third number represents number of elements.

I realize the following numbers are exaggerated … IDs are more specific than classes and classes are more specific than elements, but will the selector with specificity of 1.0.0 (thus selector with one ID) win over a selector with specificity of 0.222.0 ( selector with 222 classes/pseudo classes )?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
carewithl
  • 993
  • 1
  • 14
  • 26
  • Yes, but a selector with specificity of 1.0.0 will *lose* to one with specificity of 0.256.0. (in most browsers). See http://stackoverflow.com/a/11934505/613004 – Faust Apr 26 '13 at 00:25

1 Answers1

2

Yep.

Test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
#ID {color:red}
.C1.C2.C3 ... .C220.C221.C222 {color:green}
</style>
</head>
<body>
<div id="ID" class="C1 C2 C3 ... C220 C221 C222">This is a test.</div>
</body>
</html>

The text is red in recent Firefox, Chrome, IE, and Opera browsers.

brianary
  • 7,906
  • 2
  • 33
  • 29
  • I didn’t know “... C220.C221.C222 {color:green}” was a valid way of specifying a selector. Anyways, thank you for your help – carewithl Dec 21 '09 at 21:53