How to show current page using CSS? .current_link not working - css

Question

I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>

Answer 1

Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).

Answer 2

Try this:
.current_link a {
color: #00AD26 !important;
}

Answer 3

You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.