Having watched Evan Sharp’s “Comp to Code” talk at Mix 2010 video (check out the other Mix videos also, most are excellent), searching the web for the CSS specificity algorithm table turned up nothing as simple as his pseudo-decimal algorithm. So I reproduced the table from the talk verbatim here for reference. As you can see, id selector elements will dramatically increase the specificity of the selector, while class selector elements are an order of magitude less specific:
selector |
id |
class |
element |
sum |
|---|---|---|---|---|
#logo |
1 | 0 | 0 | 100 |
.header .nav li |
0 | 2 | 1 | 21 |
.header h1#logo |
1 | 1 | 1 | 111 |
div div * a:hover |
0 | 0 | 4 | 4 |
#nav img#logo |
2 | 0 | 1 | 201 |
Exercise for the reader: Say “specificity” three times fast. Extra points: Say “specificity algorithm” three times fast.
Recent Comments