Change a:link & a:hover for a Div Alone (CSS)

How do you change a:link & a:hover for a stand alone div in a style sheet? Last week I ran across this exact issue and had to think about for a bit to solve it.  Since that was the case, I thought I would blog about it to help anyone else with this issue.

In CSS:

/*
* Normal Links
*/
a, a:visited {text-decoration: none; color: red;}

/*
* Div only link effects
*/
div.greenclassname a:link {  color: green; text-decoration: underline;}
div.greenclassname a:hover {  color: green; text-decoration: none; }
div.greenclassname a:visited {  color: green; text-decoration: underline;}


In HTML:

<a href="#link">Normal link</a><br />

<div class="greenclassname">
      <a href="#link">Green link</a>
</div>


If you like this post and want to see more, follow me on my website www.chadcompton.com
Or if you prefer...