Do Know Evil – Tyler Mulligan’s Tips and Tricks

I was trying to figure out how to cut rendering time with smarter CSS. In my quest, I came across a plugin by google for Firebug called Page Speed which not only answered my question in the ‘Use efficient CSS selectors’ section (* #header #menu a:hover — Tag key with 2 descendant selectors and hover pseudo selector) but provided more details on the subject on the Page Speed Documentation.

“Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.”

So, #home is faster than #menu li a#home; at least in Mozilla’s case. More on this here