Each page has its own unique ID, try something along the lines of:
.current_page_item .page-item-1 {
color: blue;
}
.current_page_item .page-item-2 {
color: orange;
}
For some reason that doesn’t work. Here are what my pages look like in my source code.
<ul>
<li class="page_item page-item-212 current_page_item"><a href="http://localhost:8888/wordpress" title="home">home</a></li>
<li class="page_item page-item-6"><a href="http://localhost:8888/wordpress/test123/" title="about">about</a></li>
<li class="page_item page-item-52"><a href="http://localhost:8888/wordpress/contact/" title="contact">contact</a></li>
</ul>
My bad … I forgot to reference the anchor and added a space, try this:
.current_page_item.page-item-212 a{
color: blue;
}
.current_page_item.page-item-6 a{
color: orange;
}
Excellent it worked! I had no idea having a space between two separate classes made a difference. Thanks so much.
Fantastic – about the fifth page I’ve been to trying to crack this one and it worked – you’re a star
@cais, your great.
But It not work on IE6…
#menu li.current_page_item.page-item-2 a {}
When I navigate in different page the current_page_item styles of page-item-2 are stayed…
