How to change link: a and hover for div?

Question

In my page body, I already have a:link and a:hover .

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

How to do it?

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 to the div. sort of

 <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 bind css selectors to form different combinations of styles.

Answer 3

You can use the child select 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> 

Answer 4

You can use! important like this if the above code doesn't work

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