Install a: link, a: hover, etc. In css class with DIV

I am using the following html code:

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td width="6.25%"></td>
                <td width="12.5%"><a href="index.htm">Home</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="contact.htm">Contact Us</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="directions.htm">Directions</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="disclaimer.htm">Disclaimer</a></td>
                <td width="6.25%"></td>
            </tr>
        </table>
    </div>

and my css looks like this:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000;
}

What does not work. The above section still inherits the font color from the parent container. I understand that

I tried several different options for spanningMenu a: link and nothing works. Google does not help, as usual.

Thank!

+3
source share
3 answers

Try the following:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000 !important;
}

If that works, you have another rule that CSS considers more important. How maybe td a { color: something }? You can read in the specification about the complex order of priority of a rule.

+4
source

Try to add! important until the end of the style, so it looks like this:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000 !important;
}
+2
source

I think its quite simple.

.spanningMenu a, .spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000;
}
+2
source

All Articles