Change Class of Link on Current Wordpress Page

I am trying to make the page link a different color for the current page in Wordpress. I changed the CSS as follows:
#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover { color: #333333; text-decoration: none; }

Open in new window

.

This works for the hover state but not the active link. You can view http://irawaynehenry.com/plymaledingus/injury-law/brain-injuries/ as an example. If you hover over the Brain Injury Attorneys Link on the left side of the page you will see that one follows the style as assigned above, but the active link is no different than the rest.

The HTML for the link is as follows.
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-56 current_page_item menu-item-69"><a href="http://irawaynehenry.com/plymaledingus/injury-law/brain-injuries/">Brain Injury Attorneys</a></li>

Open in new window


Thanks in advance for the help.
wayne_henryAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Actually, scratch that previous comment. It's because the visited pseudo link is taking precedence. Add that to your new css and it'll be fine:

#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover, #palinks .current_page_item a:visited {
   ...
}

Open in new window

0
 
Chris StanyonCommented:
Your CSS for #palinks is on line 89 of your style.css but it's being overridden by the rule on line 107:

#conentWrapper a:link, #conentWrapper a:visited {
    color: #BC6700;
    text-decoration: none;
}

You can either move your CSS around, or force your #palinks colour to take effect with the !important keyword:

#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover {
    color: #333333 !important;
    text-decoration: none;
}
0
 
wayne_henryAuthor Commented:
Worked perfectly. So that I understand why this must be, what determines which style takes precedent or why !important must be used in some cases and not others?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
wayne_henryAuthor Commented:
Thank you very much! It's amazing how long you can stare at something for so long and not be able to figure it out.
0
 
Chris StanyonCommented:
CSS takes a few things into account when deciding which styles are important. Normally, it works from the top, down, so rules that appear later in a file are applied last, so here:

a { color: green; }
a { color: red; }

Your links would be red. This only applies if the selectors have the same specificity!

Basically it goes like this. An HTML element carries a certain specificity value, a class carries a higher value and an ID carries an even higher value. For ease of explanation lets assume values of 1, 10 and 100 respectfully (they're made up, by the way).

Look at this example:

a#myLink { color: green; }
a.someLink { color: red; }
a { color: blue; }

<a href='#' id="myLink" class="someLink">A Link</a>

Now obviously, all three styles could apply, but apply the rules of specificity and you'll see that the first one has a value of 101 (element + ID), the second one as a value of 11 (element + class) and the last one has a value of 1 (an element), so the link would be Green :)

You can override this by adding the !important keyword to a style, which will push it to the top of the specificity

a#myLink { color: green; }
a.someLink { color: red !important; }
a { color: blue; }

Now the link will be Red!

It's not a good idea to start throwing the !important keyword around because it get's very difficult to override styles further down your CSS, which defeats the whole point of the Cascading.

In the posts I made earlier, you should go with the second option (the visited link pseudo) rather than the !important keyword.

Takes some getting used to so you might want to Google it to find out more.
0
 
wayne_henryAuthor Commented:
Thank you very much for the detailed response. That is very helpful.
0
All Courses

From novice to tech pro — start learning today.