How can I exclude a specific element from inheriting CSS rules?

Question

I have this CSS:

a {   color:#19558D;   padding:3px 5px;   text-decoration:none; }  a:hover {   background-color:#D1E1EA;   color:#19558D;   text-decoration:none; } 

It applies to all links, but what if I don't want it to apply to a specific link on the page? What can I do?

Answer 1

There are two ways you can do this.

First way is to use the :not() selector and give your link that you don't want the styles applied to class:

a:not(.unstyled):hover {   background-color:#D1E1EA;   color:#19558D;   text-decoration:none; } 

However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:

a.unstyled:hover {   background-color:none;   color:#000   text-decoration:none; }  

Answer 2

You can apply your own class or inline style to the link in question.

for example:

<a href="#" class="MyNewClass" /> 

or

<a href="#" style="color:red;" />