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

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?

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>

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

You could use the child selector method:

div.one > a { color:blue; }
div.two > a { color:red; }

will work for

<div class=''><a>link</a></div>

but not

<div class=''><p><a>link</a></p></div>

You can use !important like this if above code is not working

.classname > a:hover{color:red !important;}
.classname > a:link{color:red !important;}
.classname > a:visited{color:red !important;}