How to set <a class="class"> to default property given <a>'s property already define in css

Question

My web pages have a lot of <a> without class and their property were set in css as below:

a{
text-decoration:none;
color:black;
}

a:hover, a:active{
color:green;
}

And now I have <a> tags that with class="tnc" and I want it to have the default property which is blue color text with underline and when active it change to red color text.

I tried this but not work:

a.tnc{
color: initial;
text-decoration: initial;
}

a.tnc:hover, a.tnc:active{
color: initial;
}

Any help is appreciated. :)

a:hover, a:active{
	color:green;
}

a.tnc{
	color: initial !important; 
	text-decoration: initial;
}

a.tnc:hover, a.tnc:active{
	color: initial;
}

I agree with the <a class="tnc" href="#">terms and conditions</a>

Answer 1

The value initial doesn't work like that.

The initial value is a defined value per CSS property; not per HTML element.

Go to MDN for the color property:

Initial value Varies from one browser to another

So for the color property: if you want a uniform color - you shouldn't use the value initial.

So to get the correct styles for the tnc class - just reset the properties with the necessary values:

a.tnc{
  color: blue;
  text-decoration: underline;
}

a.tnc:hover {
  color: red;
}

a{
text-decoration:none;
color:black;
}

a:hover, a:active{
color:green;
}

a.tnc{
color: blue;
text-decoration: underline;
}

a.tnc:hover{
color: red;
}

<a href="#">Default Anchor</a><br>
<a href="#" class="tnc">Anchor with class tnc</a><br>