CSS Specificity Algorithm Table from Evan Sharp’s Mix 2010 talk

CSS Add comments

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:

CSS specificity algorithm table

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.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in