CSS Quick Tip Tuesday :: Stacking Selectors

Something that can speed up the parsing of your sites and updating them is knowing how to group and define your css classes. The fewer lines of css that the browser has to parse before it can write out your definition the better.
A simple example is the a tag. Now we all know how to define the a tag because you've all ready my first quick tips post Lovable Links. So you will know that to define a link tag you need up to four different css declarations. What if I told you that you could compress that into two and still get the same cross browser, consistent results? Not to mention updating or changing a link color or style becomes a breeze.

a:link{font-weight: bold;
text-decoration: none;
color: #B34700;}
a:active{ font-weight: bold;
text-decoration: none;
color: #B34700;}
a:hover{ font-weight: bold;
text-decoration: underline;
color: #B34700;}
a:visited{ font-weight: bold;
text-decoration: none;
color: #B34700;}

Can become :

a:link,
a:active,
a:hover,
a:visited{font-weight: bold;
text-decoration: none;
color: #B34700;}

a:hover{ text-decoration: underline;}

Now should you want to change that link colour you only need go to one definition. And the hover is simply redefined below. Pretty spiffy hey?

Naturally this works best when the hover property is not hugely different from the active link. You wouldn't want to be defining everything to do with the link right beneath it but even if you did you'd still save yourself 50% of the code.