How to keep an :active css style after clicking a link?

Tags: html,css,fonts,icons

Problem :

I need help with creating an :active style after the icon has been clicked. I am using Font-awesome icons, and can't workout how to keep the icon a certain colour after the icon has been clicked, any help would be great, Thanks

HTML Nav table:

<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
            <td height="59"><li><a href="#"><i class="fa fa-university fa-lg "></i></li></td>
            <td height="59"><li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></li></td>
            <td height="59"> <li><a href="#"><i class="fa fa-picture-o fa-lg"></i></li></td>
            <td height="59"><li><a href="#"><i class="fa fa-comments fa-lg"></i></li></td>
            <td height="59"><li><a href="#"><i class="fa fa-tachometer fa-lg"></i></li></td>

The CSS to create a colour hover over:

    .fa-university:hover {
color: white;
transition: all 500ms ease-in-out;


Solution :

Use JavaScript:

document.getElementById("target").onclick=function () {//Detects a click on #target

  if (this.classList) {//check if classlist is supported
     this.classList.add("newcolor");//add the class
  } else {
    this.class += " newcolor";//if classlist isn't supported, add " newcolor" to the attribute value
#target {
  width: 50px;height: 50px;
  transition: all 0.5s;

.newcolor {
  background-color: blue !important;
<div id="target">Foo</div>

This in simple terms, adds a new class with new values to the element after it has been clicked.

    CSS Howto..

    How to stop ReSharper removing spaces after css properties

    How to use these ruby based CSS stylsheet frameworks languages?

    How to position images next to text using CSS

    How to remove left and right margin on first and last div

    How to horizontally center two divs within a header div?

    How to menu on one line and always in center?

    How to allow my CSS slide out element to push its neighboring content?

    How can I create a footer/toolbar in an iPhone web app?

    How to disable CSS in Browser for testing purposes

    How to trigger one element inside a div on mouse hover in CSS

    How to Detect css style by iPhone/iPad

    How to change a portion of text on hover with css [duplicate]

    Codeigniter--add “active” css class to link, how to?

    How do I place an image after a link?

    How to insert line breaks between numbers and content in ordered list

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    Fuelux, how to fix the width of a repeater column

    How do I increase the size of the text contained?

    How i can put a picture above a border in css?

    How to set background-color to the length of the test in a jQuery UI accordion?

    how to change 'inner' lineheight of css text

    jqueryUI custom button not showing up

    How to apply custom CSS and Javascript specific CMS page Magento

    How to make padding:auto work in CSS?

    CSS - How to get star aligned properly on this page

    how to ignore br or line breaks in text with pure css truncate text button

    How do I stop my 'body' from eating my 'foot'

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How to prevent left “post” section from dropping off?

    How to override external css?