Question

I am trying to change the colors of a link using css but for only one section of a page.
Yet the problem is that it is not working.

I want to change the link color of the text in the following table:

<table width="100%" class="icons">
  <tr class="icons">
    <td class="icons"><a href="http://www.example.com/">
    <img src="http://www.example.com/2.png" />
     TEXT
     </a></td>
    </tr>
</table>

And this is the css:

.icons{
    font-size:24px;
    margin-bottom:40px;
}

.icons:link {text-decoration: none; color: red;}
.icons:visited {text-decoration: none; color: red;}
.icons:active {text-decoration: none; color: red;}
.icons:hover {text-decoration: underline; color: blue;}

I even tried <span class="icons">TEXT</span> and that did not work either.

Thanks So Much!

Answer 1

You need to apply the link pseudo-classes to the <a>, not the <td class="icons">:

.icons a:link {text-decoration: none; color: red;}
.icons a:visited {text-decoration: none; color: red;}
.icons a:active {text-decoration: none; color: red;}
.icons a:hover {text-decoration: underline; color: blue;}