CODEWITHSUNDEEP
csshyperlink
amie
amie

Reputation: 3

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

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"><a href="index.html">Portfolio</a></li>
    <li id="about"><a href="about.html">About</a></li>
    <li id="contact"><a href="contact.html">Contact</a></li>
</ul>

Upvotes: 0

Views: 3174

Answers (3)

Joe
Joe

Reputation: 15528

You should use:

#main_nav li.current_link a {
    color: #00AD26;
}

This will overrule the other selectors and avoids using !important.

Upvotes: 0

user1823761
user1823761

Reputation:

Try this:

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

Upvotes: 1

SLaks
SLaks

Reputation: 887767

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).

Upvotes: 1

Related Questions