WordPress.org

1. ads1018
   Member
   Posted 2 years ago #

   I created three different pages. Is it possible to style the current_page_item link for each specific page? For example, I'd like the current_page_item link for page 1 to be blue but the current_page_item link for page 2 to be orange.

2. Edward Caissie
   Member
   Posted 2 years ago #

   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;
   }

3. ads1018
   Member
   Posted 2 years ago #

   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>

4. Edward Caissie
   Member
   Posted 2 years ago #

   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;
   }

5. ads1018
   Member
   Posted 2 years ago #

   Excellent it worked! I had no idea having a space between two separate classes made a difference. Thanks so much.

6. Edward Caissie
   Member
   Posted 2 years ago #

   You're welcome!

7. minnellium
   Member
   Posted 2 years ago #

   Fantastic - about the fifth page I've been to trying to crack this one and it worked - you're a star

8. jho1086
   Member
   Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.