How To Style The Link Of Your Current Page With CSS


Simple Explanation:

1. Add a class to each Body tag on each page you want to style the 'current' links for.
2. Add a class to the list items that contain your links on each page you want to style the current links.
3. There is no step 3.
4. I forgot testing, test it.
5. Now, if you're like me – go back and fix the typo's that are messing everything up …
6. Re-test
7. Okay, that's 6 steps instead of 2. But if you're good, it should be 2 …

What we're effectively doing here is creating an 'AND' logic gate in our Cascading Style Sheet for each page. I think.

Yep, that means as many extra lines of code in your css as you have pages. But do not worry, it's a copy / paste job, then amend a little.

The logic, if I have it right, is something like this:

IF page Class = "current", AND list item Class = "current" THEN

Set style as bold, white, no underline



Method: Add a class to the Body tag of each page:

(tags removed – just add in the relevant <, or>)

body class = &quot;home&quot; body class = &quot;about&quot;

Then add a class to each li tag in your list menu:

div id = &quot;links&quot; li class = &quot;first&quot; a href = &quot;index.html&quot; Home / a / li li class = &quot;second&quot; a href = &quot;about.html&quot; Home / a / li

The CSS goes like this:

body.home #links li.first {font-style: bold; color: FFF; text-decoration: none}

Or whatever styling you'd like for the current page.

Now the link on your home page should be white, with no underline, and bold.

Rinse and repeat for your other pages, ie:

body.about #links li.second {font-style: bold; color: FFF; text-decoration: none}

You are the man here, you tell the CSS which page's (about, or home) body Class, and which Link's Class should get the styling. Simple if you do not have too many Bud's and it's 3am.

Of course, you may opt to choose jQuery or other client side scripting, server-side script, or Spry if you use Dreamweaver.

That's your shout.


Leave a Reply