Question

With this markup:

    <div id="shopNav">
        <ul>
            <li class="active">
                <a href="#">test 1</a></li>

        </ul>
    </div>  
    <ul>
        <li class="active1"><a href="#">test</a></li>

    </ul>

This doesn’t work

#shopnav li.active {
    border:1px solid red !important;    
}

but:

.active {border:1px solid red !important;}

does work.

I get different behaviours with different doc types:
with

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

The first one is highlighted in FF and not ie8 and with:

The behaviour is consistant, in that only the second li is given the style.

I don’t understand this at all as I feel like I’ve been using this sort of selector for ages… Why doesn’t the first selector it work in IE9? And why doesn’t the first selector work in either with the loose.dtd ?

See it in action on this page

Answer 1

The id attribute values are case sensitive. When you have id="shopNav", then in CSS you need to use #shopNav, not #shopnav.