CSS: What is the correct way to style all links within a single table?

Question

My intent is to style all anchor tags within a table in a particular way.

The anchor tags may be contained within various containers inside the table, including:

• table cells
• divs
• paragraphs

My initial attempt:

.FooterTable a:link, a:visited, a:hover, a:active
{
    color: blue;   
}

This is occurring within a CMS (DotNetNuke), so pretty much everything has a style specified in a CSS class somewhere. However, I believe my CSS Class above should take effect.

Here's my markup:

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="FooterTable">
    <tr>
        <td width="23%" align="center">
            <a href="http://www.test.com/pages/45_contact_us.cfm">Our Company</a>
        </td>
        <td width="19%" align="center">
            <a href="http://www.test.com/pages/6_test_test_test_test.cfm">Need Help?</a>
        </td>
        <td width="37%" align="center">
            <a href="http://www.test.com/pages/187_test_test.cfm">Shop</a>
        </td>
        <td width="21%" align="center">
            <a href="http://www.test.com/pages/42_test_test.cfm">Partners</a>
        </td>
    </tr>
</table>

Current Behavior

All text on the site is specified to be some sort of gray. That gray color is simply not being overridden with the above CSS Class.

What is the correct way to set the style of all links within a table, such as this?

Answer 1

You have the correct idea, though you do need to make sure that .FooterTable precedes each a, as each comma separates full selectors.

Ideally, you could go with the simple:

.FooterTable a, .FooterTable a:hover {
    color: blue;   
}

But, you seem to be running into a CSS selector specificity/precedence problem. Read that answer for more details, but basically, existing CSS rules being applied may "more specific" and therefore take precedence over your fairly simply .FooterTable a:link rule.

To verify this, I isolated just the HTML/CSS from this question into a sample page, and the blue color in the CSS rule in fact does apply to the links.

To fix this problem, you have two options:

1. Ideally, global CSS rules should not be overly specific. If you can fix them to be less specific, you will be better all around.
2. If you can only add CSS rules, not take away from those already applied elsewhere, you will need to be more specific. See my answer and other answers on StackOverflow for details on how selector precedence works.

Answer 2

First of all, that selector isn't doing what you want it to. Commas separate entirely independent selectors. Which means you're targeting four different groups of elements:

1. .FooterTable a:link — All a elements in their normal, un-hovered, un-visited state that are descendants of any element with a class of FooterTable
2. a:visited — All a elements on the page that have been visited
3. a:hover — All a elements on the page that are being hovered

...and so on. You'll need to duplicate the .FooterTable part in each comma-separated selector.

The next problem sounds like a specificity problem. If you told all .FooterTable a:link elements to have a color of blue, then my guess is you have a more-specific rule somewhere else that tells those links to be a different color. We'll probably need to see more CSS.