У меня есть решение, которое немного отличается от того, что вы ищете, но гораздо лучше, чем вы делаете.
PHP:
<?php
if ( is_page('vision') )
$page = 'vision';
elseif ( is_page('team') )
$page = 'team';
elseif ( is_page('commentary') )
$page = 'blog';
elseif ( is_page('organizations') )
$page = 'org';
?>
<body id="page-<?php echo $page; ?>">
...
Примечание по поводу вышеупомянутого PHP : Если бы у вас была функция get_page_id(), вы могли бы упростить это намного больше. просто имея <body id="page-<?php get_page_id(); ?>">
HTML:
<ul id="sidenav">
<li class="visionside"><a href="#">...</a></li>
<li class="teamside"><a href="#">...</a></li>
<li class="blogside"><a href="#">...</a></li>
<li class="orgside"><a href="#">...</a></li>
</ul>
CSS:
body#page-vision #sidenav li.visionside a,
#sidenav li.visionside a:hover {
...
}
Примечание по поводу вышеупомянутого CSS: Выше перечислены две строки, которые можно стилизовать вместе - текущее состояние и состояние наведения. Это будет отображать текущее состояние при наведении курсора на навигацию, независимо от того, какая навигация является «текущей» навигацией.
Учитывая, что вы заинтересованы в использовании CSS Sprites, я определенно рекомендую вам прочитать эту статью .