CODEWITHSUNDEEP
css
user2467128
user2467128

Reputation: 153

Don't use CSS style for a specific link

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!

Upvotes: 0

Views: 166

Answers (2)

cmt
cmt

Reputation: 1495

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.

Upvotes: 0

Alyssa Ross
Alyssa Ross

Reputation: 2169

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;
}

Upvotes: 2

Related Questions