Firebug and CSS Specificity

I was trying to get my Twitter widget (adapted from the Twitter Fan Wiki) to show a profile icon beside my own updates.

My original code was:

<style type="text/css">
.twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}
</style>

I used it like so inside the widget code:

<ul id="twitter_list">
<li class="twitter_self">my update message</li>
</ul>

But what was this? The original arrow icons kept showing up!

After a little googling, I discovered Firebug, an amazing, free Firefox* plugin that, IMHO, all web developers should install. It allowed me to inspect Javascript-generated elements, among other things (like single-stepping through Javascript and live code/CSS editing), and I was able to confirm that my code was being overridden by the main skin style.

(* "Lite" version available for other browsers)



So I googled some more and found the wacky CSS: Specificity Wars page, which let me know that the spec says

ID selectors have a higher specificity than attribute selectors.

Aha! So I fixed the code like so:

<style type="text/css">
#twitter_list .twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}
</style>

... and all was well. An easy problem to solve, but I learned something new.