How to Change Link Color When Clicked

How to change link color when clicked?

You could use a combination of the tabindex attribute and :focus selector to your anchor elements.

http://jsfiddle.net/dcNzt/

HTML

<a href="#" tabindex="1">Stays blue</a>

CSS

a {   
    color: black;   
}

a:active {
    color: blue;
}

a[tabindex]:focus {
    color:blue;
    outline: none;
}

How to change a a tag color when I click on it and it doesn't change until I change my URL

react-router-dom has an additional component called NavLink to which you can pass an additional prop called activeClassName. This will allow you to give custom styles to your active link.

example:

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

This component will replace all of your Link components in your navigation.

Link text color not changing after being visited

The :visited pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.

A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in Stack Overflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.

Related Question: How to change the color of hyperlink after click it

Credit to Greg for this answer.

HTML CSS - Make icon change color when clicked (like a link)

:visited is a link-related pseudo-class. It must be applied to the <a> tag.

.visit {
  fill: lightblue;
}

a:visited .visit { /* Fix here */
  fill: green;
}

<a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a>

How to change the color of an active link?

You can use :focus pseudo-class.

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

a:focus {

  color: red;

}

<ul>

  <li> <a href="#"> dog </a> </li>

  <li> <a href="#"> cat </a> </li>

</ul>

---

Related Topics