How to change a:link and a:hover for a div alone?

Question

In my page's body I already have an a:link and a:hover.

But now I have another div tag where I want different a:link, a:hover and a:visited.

How do I do this?

Answer 1

In CSS:

div.classname a:link {
  color: #123456;
}

div.classname a:hover {
  color: #123;
}

div.classname a:visited {
  color: #654321;
}

In HTML:

<div class="classname">
  <a href="#link">link</a>
</div>

Answer 2

Assign a class for the div. something like

<div>
    <a></a> //style from a:link and a:hover
</div>
<div class="my-div">
    <a></a> //style from a:link and a:hover overridden by styles from .my-div a:link and .mydiv a:hover
</div>

Style

a:link{} //old link
a:hover{}


.my-div a:link{} //second link
.my-div a:hover{}

You can chain the css selectors to form different combinations of styles