CSS Active Class won't be respected in browser?

Question

I'm trying to make a navigation of buttons. When one button is clicked, that anchor tag changes its background color to show that it is active. I'm using the background property with gradients but when I apply the active class to a link, the background doesn't change colors. I've tried looking in the Chrome Console and it simply shows that the new background color is loaded but it does not apply it. (It has the line through it as if it is over-written by another CSS rule. But the new CSS colors comes after the old colors so in the order of hierarchy, it should take precedence. Any ideas on what I'm doing wrong?

Here's my CSS code:

.main-nav li a {
font-size: .9em; 
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
color: #444135;
display: inline-block;
margin: 24px 12px;
background: #AFE4B3; /* Old browsers */
 background: -moz-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* FF3.6+ */
 background: -webkit-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Opera 11.10+ */
 background: -ms-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* IE10+ */
 background: linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* W3C */
 border-radius: 10px;
 padding: 7px;
 width: 100px;
}

.active {
 background: -moz-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* FF3.6+ */
 background: -webkit-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Opera 11.10+ */
 background: -ms-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* IE10+ */
 background: linear-gradient(#FF6440, #FF8E73 , #FF6440); /* W3C */
}

And here's the HTML that it is being applied to:

<nav class="main-nav">
    <ul>
        <li><a class="active" href="index.php">Home</a></li>
        <li><a href="library.php">Library</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

Here's a fiddle of the problem: http://jsfiddle.net/6udt8/

Thanks in advance!

Answer 1

.active is less specific than .main-nav li a so make it more specific by writing

nav ul li a.active {
   /* Styles goes here */
}

Or even more specific...

nav.main-nav ul li a.active {
   /* Styles goes here */
}

Demo

---

As commented, that why does this really happen? So let me explain you that, the issue is the selectors specificity here, lets make a demonstration example...

But first lets take a look at what docs have to say...

From W3C 6.4.3 Calculating a selector's specificity

A selector's specificity is calculated as follows:

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Don't get what the docs say? Don't worry, read ahead, I've shared a simple explanation which is followed by an article which will explain you the specificity calculation.

Suppose we a simple span element in a class...

<span class="hello">This is just a dummy text</span>

And we use an element selector like say

span {
    color: red;
}

Obviously it will color it red... Demo

Now lets declare another selector like

span.hello {
   color: green;
}

And place that in your stylesheet, and so now, that will turn the text of the span color to green... (Regardless of the order you place the property block in your stylesheet)

Demo 2 (Text will be now green)

It's because span.hello {} IS MORE SPECIFIC compared to a simple element selector which is span {}.

---

For more detailed explanation, I would like you to read on CSS Specificity

You can also use CSS Specificity Calculator to compare selectors specificity.

The example I shared of span, here, the specificty of the selector will be only 1

---

Whereas span.hello specificity will sum up to 11