Here’s a weird issue that came up in a forum post, which left me scratching my head. The poster was using themes and had a CSS file in the theme folder, one rule of which was overriding some defaults set in the universal selector defined in another CSS file. The hierarchy seemed fine; the theme CSS file was loaded after the main one, but something was amiss.

 

One of the properties being overridden was the colour of a grid view header; other properties were set fine, but the colour for the header wasn’t set. Firebug showed the hierarchy was correct too; the colour was set – it even had !important – but it just wasn’t taking effect. This stumped me and a quick search came up with a SO post that had a working solution, which is to add the universal selector to the overriding rule. So instead of:

 

.table_title {

 

You have:

 

.table_title * {

 

The style now takes effect. Weird, huh?

 

So the real question is why doesn’t the overriding take place in the first instance? The answer is that the universal selector bypasses the inheritance chain, so nothing overrides it, unless you actually override the universal selector again. Eric has a full description of the universal selector and a read through shows you how confusing it can be. It’s powerful, but does lead you to situations like this where the expected rules don’t work.