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.