javascript - How to make links after they are visited not have any styling rules -

i using react , doing task where, when selected; new link gets styled accordingly. problem when click on new link supposed red , no styling should applied it. however, turns darker blue , left underlined until click somewhere else on page.

something note here. if click somewhere else after have clicked link turn red without underline. want happen on first click however.

these styles after link clicked:

this how is:

---

this how should be:

here code:

style:

.zone-selected {   text-decoration: none;   color: red; } 

zone:

  const title = this.props.isselected       ? <a href="#" classname="zone-selected">           {this.props.zone.name}         </a>       : <a href="#">           {this.props.zone.name}         </a>; 

you can ignore other stuff. saying if conditional true apply styling if not no styling.

not sure if best practice or "right way" got work post have in case else comes across this.

i needed add new style .zone-selected. needed override focus property. wanted hover styling gone, reason if had little different show below.

.zone-selected {   text-decoration: none;   color: red; }  .zone-selected:focus {   text-decoration: none;   color: red; } 

with think like:

 .zone-selected:hover {    text-decoration: none;    color: green; } 

for reason not work had go tag , apply so:

a:hover {   text-decoration: none;   color: green; } 

wiki