I try to add a custom color to a link inside a div but its not working, the color does not change. Why is that?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
      .navigation-div a {
        display: block;
        font-size: 18px;
        color: #14133b !important;
        line-height: 1;
        margin-bottom: 26px;
    }

    .navigation-div a:hover {
        color: #CEA941 !important;
    }

    .navigation-div a:visited {
        color: #14133b !important;
    }
    .navigation-div a:link {
        color: #14133b !important;
    }
    .navigation-div a:visited {
        color: #14133b !important;
    }
  </style>
</head>

<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody><tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
<a href="#"> Motor  </a></div>
</td>
<td><div class="navigation-div">
<a href="#">12345 </a></div>
</td>
</tr>

</tbody></table>
</body>

</html>

You’re overwriting your hover styles with the :link selector a couple of lines later. In general, try and avoid overusing !important – there’s no need for it in this situation. Try this:

.navigation-div a {
  display: block;
  font-size: 18px;
  color: #14133b;
  line-height: 1;
  margin-bottom: 26px;
}

.navigation-div a:hover {
  color: #CEA941;
}

.navigation-div a:visited {
  color: #14133b;
}
<table class="table" style="border-bottom: 0px solid black;">
  <tbody>
    <tr>
      <td valign="top"></td>
      <td valign="top">header 1</td>
      <td valign="top">header 2</td>
    </tr>
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td valign="top"></td>
      <td>
        <div class="navigation-div">
          <a href="#"> Motor  </a></div>
      </td>
      <td>
        <div class="navigation-div">
          <a href="#">12345 </a></div>
      </td>
    </tr>

  </tbody>
</table>

If you really need to keep the !important rules, you can just move your :hover style underneath the :link

Remove the important keyword from your style in .navigation-div a, a:link and a:visited (you don’t need the important keyword anywhere):

    .navigation-div a {
            display: block;
            font-size: 18px;
            color: #14133b;
            line-height: 1;
            margin-bottom: 26px; 
      }

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
      .navigation-div a {
        display: block;
        font-size: 18px;
        color: #14133b !important;
        line-height: 1;
        margin-bottom: 26px;
    }

    td .navigation-div a:hover {
        color: #CEA941 !important;
    }

    .navigation-div a:visited {
        color: #14133b !important;
    }
    .navigation-div a:link {
        color: #14133b !important;
    }
    .navigation-div a:visited {
        color: #14133b !important;
    }
  </style>
</head>

<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody><tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
<a href="#"> Motor  </a></div>
</td>
<td><div class="navigation-div">
<a href="#">12345 </a></div>
</td>
</tr>

</tbody></table>
</body>

</html>

use this code . it’s work .

All those !important “collide” with each other; simply maintaining the one assigned to the navigation-div a:hover should be enough. Try not to overuse the !important keyword, usually it’s not the best thing to do.

In your code, the color property of navigation-div a:hover was overwritten multiple times by the other selectors. The only one that should prevail over the others, for your intended behavior, is the hover one, in fact you could also omit the other selectors and so the use of !important.

.navigation-div a {
    display: block;
    font-size: 18px;
    color: #14133b;
    line-height: 1;
    margin-bottom: 26px;
}

.navigation-div a:hover {
    color: #cea941;
}
<!DOCTYPE html>

<html>
    <head>
        <title>Untitled</title>
    </head>

    <body>
        <table class="table" style="border-bottom: 0px solid black">
            <tbody>
                <tr>
                    <td valign="top"></td>
                    <td valign="top">header 1</td>
                    <td valign="top">header 2</td>
                </tr>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td valign="top"></td>
                    <td>
                        <div class="navigation-div">
                            <a href="#"> Motor </a>
                        </div>
                    </td>
                    <td>
                        <div class="navigation-div">
                            <a href="#">12345 </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

So since you’re using a table you have to go through each element like this :

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
    /* a{
      color: black;
    }
    a:hover{
      color: reds;
    } */
table> tbody > tr>td>.navigation-div >a:hover{
 color: red;
}

</style>
</head>

<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody>
 <tr>
      <td valign="top"></td>
      <td valign="top">header 1</td>
      <td valign="top">header 2</td>
 </tr>
 <tr>
      <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
      <td valign="top"></td>
      <td><div class="navigation-div">
      <a href="#"> Motor  </a></div>
     </td>
     <td><div class="navigation-div">
     <a href="#">12345 </a></div>
     </td>
   </tr>

</tbody></table>
</body>

</html>

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.