CSS Sprites on Current Page

I would like to know how to do this as well. Can’t seem to find a good explanation of how to target the current page/state. Would be great if someone has a good article/tutorial.
Thanks
Chloe.

first question – what menu?

page menu for instance has the class ‘current_page_item’ on the link to the current page, which you can use to style the link in the style.css. others are similar, check the codex for the corresponding links ??

https://codex.www.ads-software.com/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items

Its odd that there are 100 css sprite examples with not a single one showing how to make a menu item stay ‘current’ in WP.

I am sure my way is wrong in many ways, but it works for me!
1. Make your menu here: (its great)
https://lab.mattvarone.com/navbar/index.php
2. Place the css in your stylesheet, and the html where you want.
3. Read this, esp. about php: https://codex.www.ads-software.com/Dynamic_Menu_Highlighting
4. From matt’s css, carefully take out all styling for .current. eg:

ul#navigation li#navigation-1 a.current {
		background-position: -120px 0px
	}

and replace it with appropriate php in the header, (see “3”). EG:

<?php
if ( is_page('home') ) { $current1 = 'navigation-1 a'; }
elseif  ( is_category('bla') ) { $current2 = 'navigation-2 a'; }
?>

etc.

I am sure someone smarter can show a better way, but no one has that I can find!

oops, forgot item 5!

5. In the header under the php in item 4, put in something like the following styling:

<style type="text/css">
ul#navigation li#<?php echo $current1; ?> {
background-position: -120px 0px;
}
ul#navigation li#<?php echo $current2; ?> {
background-position: -120px -39px;
}</style>