CODEWITHSUNDEEP
javascripthtmlcss
Tom
Tom

Reputation: 845

how to make a specific link not to be affected by its current default style?

Ok, I got a link with its following style

a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
        background-color: green;
        color: white;
}

That is good for all normal links

However, for this specific link I don't want it inherit anything from its current default style. I want it to use other style, so I used id selector

#otherLink, #otherLink:visited {  
  color: blue;
  text-decoration:none;
  font-weight: bold;
}

#otherLink:hover, #otherLink:active {
  color: red;
}

then I set 

var userName_a = document.createElement('a');

userName_a.setAttribute( 'id', 'otherLink' );

The thing is that some styles of otherLink got affected to userName_a but other current default link styles still affects to userName_a.

So, how to make a specific link not to be affected by its current default style?

Upvotes: 1

Views: 68

Answers (3)

caldera.sac
caldera.sac

Reputation: 5088

this is yor html.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
      a.normal{
        text-decoration: none;
        color:blue;

      }
      a.normal:hover{
        color:green;
      }

      a.special{
        text-decoration: none;
        color: red;
      }

      a.special:hover{
        color:yellow;
      }
    </style>
</head>
<body>

<a href="" class="normal">HOME</a>
<a href="" class="normal">ABOUT</a>
<a href="" class="special">DEFAULT</a>


</body>
</html>

then when your call to your special link in js always use a.special and for normal a.normal

Upvotes: 0

sethbro
sethbro

Reputation: 1898

The only way I can see is go back to your base styles and use the NOT pseudo-class to rule out your anchor with the specific ID.

a:link:not(#otherLink), a:visited:not(#otherLink) {
    /*styles*/
}

It's not ideal but I wanted you to know about the option.

Upvotes: 0

Blake A. Nichols
Blake A. Nichols

Reputation: 870

The only way to clear the properties is to re-declare them in your secondary selector to initial, i.e. background-color:initial;

Upvotes: 1

Related Questions