Ryan Stouts Freewebs Site

My Blog

Specificity (And why css does what it does)So my friends and I at my work (http://www.freewebs.com) were trying to figure out the browsers algorithm for determining which css rules take precedence.

Here's an example. The following produces a blue h2

<style>
div h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>

<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>

So we concluded that obviously id's take precedence over tags.

However, in this situation we end up with a red h2

<style>
#myDiv h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>

<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>

It turns out after a bit of searching that the algorithm is pretty simple. Here's what the w3c had to say:

A selector's specificity is calculated as follows:

count the number of ID attributes in the selector (= a)

count the number of other attributes and pseudo-classes in the selector (= b)

count the number of element names in the selector (= c)

ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity. I'm speaking at Ajax World Conference in NYSo, if anyone is in new york in march and board, I'll be presenting on "Workarounds ever javascript developer should know" at Ajax World Conference. It should hopefully be a good presentation. At the moment I have been having fun playing with keynote for mac and trying to find make some simple sample code. With any luck, it should help people figure out how to get a better end user experience and maybe make a few of the problems they run into a little easier to solve. I think I am also going to focus on performance a lot, but who knows how it will end up.So coolWhile the JVM is a beast when it comes to load time and applets are on the verge of death, this is cool.