Question

I’m attempting to style a nav <li> element in the same way that I style its active state. When a user is on the page in question, the nav element should have class .on in addition to its ID. I’m off somewhere because the page is not cooperating. FYI this is using Thesis, so the body of each page already has the .custom class. Thanks!

CSS (see panel4a)

/*Navigation*/
.custom div#custom_nav ul {
    list-style-type: none;
    margin-left: 10px;
}

.custom #nav_item {
    width: 224px; height: 360px;
    background: url('images/nav_sprite.png');
    margin: 10px auto; padding: 0;
    position: relative;}

.custom #nav_item li {
    margin: 0; padding: 0; list-style: none;
    position: absolute;}

.custom #nav_item li, #nav_item a {
    display: block;}


.custom #panel1 {top: 0px; left: 0px; width: 224px; height: 30px;}
.custom #panel2 {top: 51px; left: 0px; width: 224px; height: 30px;}
.custom #panel3 {top: 107px; left: 0px; width: 224px; height: 30px;}
.custom #panel4 {top: 162px; left: 0px; width: 224px; height: 30px;}
.custom #panel4a {top: 194px; left: 30px; width: 50px; height: 15px;}
.custom #panel4b {top: 194px; left: 83px; width: 36px; height: 15px;}
.custom #panel4c {top: 194px; left: 123px; width: 27px; height: 15px;}
.custom #panel4d {top: 194px; left: 153px; width: 62px; height: 15px;}
.custom #panel5 {top: 216px; left: 0px; width: 224px; height: 30px;}
.custom #panel6 {top: 268px; left: 0px; width: 224px; height: 30px;}
.custom #panel7 {top: 324px; left: 0px; width: 224px; height: 30px;}

.custom #panel1 a, #panel2 a, #panel3 a, #panel4 a, #panel5 a, #panel6 a, #panel7 a {
    height: 30px;
}

.custom #panel4a a, #panel4b a, #panel4c a, #panel4d a {
    height: 15px;
}

.custom .on #panel4a {
    background: transparent url('images/nav_sprite.png')
    0px -546px no-repeat;}}

.custom #panel1 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -384px no-repeat;}
.custom #panel2 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -435px no-repeat;}
.custom #panel3 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -491px no-repeat;}
.custom #panel4 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -546px no-repeat;}
.custom #panel4a a:hover {
    background: transparent url('images/nav_sprite.png')
    -30px -578px no-repeat;}
.custom #panel4b a:hover {
    background: transparent url('images/nav_sprite.png')
    -83px -578px no-repeat;}
.custom #panel4c a:hover {
    background: transparent url('images/nav_sprite.png')
    -123px -578px no-repeat;}
.custom #panel4d a:hover {
    background: transparent url('images/nav_sprite.png')
    -153px -578px no-repeat;}
.custom #panel5 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -600px no-repeat;}
.custom #panel6 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -652px no-repeat;}
.custom #panel7 a:hover {
    background: transparent url('images/nav_sprite.png')
    0px -708px no-repeat;}

CODE (see panel4a)

function custom_nav() { ?>
    <ul id="nav_item">
        <li id="panel1"><a href="<?php bloginfo(url)?>"></a></li>
        <li id="panel2"><a href="<?php bloginfo(url)?>/tools"></a></li>
        <li id="panel3"><a href="<?php bloginfo(url)?>/sales"></a></li>
        <li id="panel4"><a href="<?php bloginfo(url)?>/portfolio_identity"></a></li>
        <li id="panel4a" class="<?php if (is_page('portfolio_identity')) {echo 'on';} else {echo 'panel4a';} ?>"><a href="<?php bloginfo(url)?>/portfolio_identity"></a></li>
        <li id="panel4b"><a href="<?php bloginfo(url)?>/portfolio_print"></a></li>
        <li id="panel4c"><a href="<?php bloginfo(url)?>/portfolio_web"></a></li>
        <li id="panel4d"><a href="<?php bloginfo(url)?>/portfolio_packaging"></a></li>
        <li id="panel5"><a href="<?php bloginfo(url)?>/awards"></a></li>
        <li id="panel6"><a href="<?php bloginfo(url)?>/contact"></a></li>
        <li id="panel7"><a href="<?php bloginfo(url)?>/client_login"></a></li>
    </ul>
<?php }
add_action('thesis_hook_before_sidebar_1', 'custom_nav');

Answer 1

You need to use the correct selector order:

ul#nav_item #panel4a.on { /** specific styles **/ }

note this is grossly over-specific; and just

#panel4a.on should suffice however.