CSS for lunch

I had never heard of CSS specificity until I started my new job as a web developer, and let me tell you, it’s quite interesting. Now tell me, which style do you think would win if they are printed in this order in the style sheet?

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

Will you get a PNG or a GIF? The answer is: GIF.

When I thought of cascading style sheets, I always thought it meant that a style will override another if it’s further down in the file. But actually, the cascade is down the class of selector types used. In this case, a standard ID selector wins over an attribute selector. Instead of getting into all the math mumbo jumbo, I’ll turn it over to Andy Clarke who will explain CSS specificity in terms of Star Wars, something we can all understand.