When starting out with CSS, you may be tempted to assign a class or two to every item on your page. Today's tip will help you to accomplish the same amount of styling without overly littering your HTML with classes. The trick is to use descendant selectors.

Let's say, for example, most of your page contains black text on a white background, but one box contains white text on a dark background. The CSS for the box might look like this:

#darkbox {
background:#c55;
color:#fff;
padding:5px;
float:left;
width:100px;
margin-right:5px;
}

and the HTML like this:

<div id="darkbox">
This is an example of a box with white text on a dark background.

It appears in Antone Roundy's <a href="http://css.geckotribe.com/css-tips/">CSS Tips Blog</a>.
</div>

CSS Tips Blog.

And here's an example of what it would look like on your webpage.

What's wrong with this picture? Yep, the link text is a little hard to read, because the link color is intended for display on a light background. You could fix that by doing this with the link tag:

<a href="http://css.geckotribe.com/css-tips/" style="color:white;">

But what if you have a whole bunch of links in the box? You don't want to have to repeat that CSS in every one. Any you don't want to have to do this either (assuming you've defined "whitelink" in your CSS appropriately):

<a href="http://css.geckotribe.com/css-tips/" class="whitelink" >

Fortunately, there's an easy way to color all of the links in the black box at once without changing your HTML at all. Instead, do this in your CSS:

Reader Comment:
Joshua Uebergang said:
This is how I formatted my links in my feed. Every link I have throughout my site I have a css class for it. The feed has links that get assigned the default 'a' class. So I just format the default links by normal css i.e. a:link{...} a:hover{..} ...
(join the conversation below)

#darkbox a { color:#fff; }

Now, all "a" tags (links) that are descendants of (located inside) the object whose ID is "darkbox" will have white text. Note that "#darkbox" and "a" are separated by whitespace.

You can go one better than this, and set different styles for visited links and links that are being hovered over and clicked. For example:

#darkbox a:link { color:#fff; }
#darkbox a:visited { color:#ccc; }
#darkbox a:hover {
color:#900;
background:#fff;
}
#darkbox a:active {
color:#f00;
background:#fff;
text-decoration:none;
}

Now, unvisited links will be white, visited links will be light gray, links being hovered over will be red on a white background, and links being activated will be brighter red on a white background with no underline. And all of this is accomplished without adding any CSS to the <a> tags, and without affecting the links on the rest of your webpage.

One important note before we finish about the order of CSS rules for links: to ensure that your styles are applied as expected in all web browsers, specify the styles for your link pseudo-classes in the order shown above--link, visited, hover, active. Why? Because if, for example, "hover" comes after "visited", some browsers will not apply the hover style to visted links (the last applicable style will override those that come before it). An easy way to remember the proper order is to think "LoVe HA". The capitalized letters are the first letters in the pseudo-class names.