Don't use CSS style for a specific link

Question

I currently use these:

a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

Codes from a .css file called layout.css, I use them for my navigation bar. Now I have a link which I don't want to use the .css for, I need to do something with classes I think, but can't get it to work.

I tried doing:

 a.not
 {
 /*nothing*/
 }

And then putting class="not" inside the link tag, but the link still uses the same style as the menu instead of the standard blue link.

I am not good with .css, so that must be why I can't get it to work.

Does anyone know how to solve this? Thanks in advance!

Answer 1

You can use the :not() selector.

a:link:not(.not), a:visited:not(.not)
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover:not(.not),a:active:not(.not)
{
background-color:#7A991A;
}

• user2467128: This worked, thanks a lot, will accept this answer in 7 minutes.
• Alyssa Ross: You should note that this will only work in fairly recent browsers (see caniuse.com/#feat=css-sel3). If you want support for IE 8 or earlier, you'll have to use something like Selectivizr, but it's pretty easy to add.
• Spudley: Please note that this will not work in older browsers (eg old versions of IE). If that's important to you, you'll need an alternative solution.

Answer 2

This

a.not
{
/*nothing*/
}

does not overwrite previously set styles.

Rather, you must reset the values yourself. And that's a tedious process. Another approach is to use a basic style for all a elements, then create two classes that style any non-basic a elements accordingly.