CSS class selector issue

Why doesn't this work? I'm new to CSS, and I don't know why the following won't w开发者_如何学JAVAork.

<div id="nav">
    <ul id="tabnav">
        <li class="selected"><a href="index.php">Tab One</a></li>
        <li><a href="index2.html">Tab Two</a></li>
        <li><a href="index3.html">Tab Three</a></li>
        <li><a href="index4.html">Tab Four</a></li>
    </ul>
</div>

CSS:

ul #tabnav li.selected { 
    background-color: #f00;
}

Because there's no element with id tabnav as child of an ul element.

Either remove the ul

#tabnav li.selected { 
    background-color: #f00;
}

or attach it to the ul

ul#tabnav li.selected { 
    background-color: #f00;
}

Addition to answer above:
I dont know how good css handles background-color: #f00; The hexadecimal value should be six decimals long. (two first representing Red, Next blue and last green)

background-color:#FF0000;

Try:

<style type="text/css">
#nav #tabnav li.selected {
    background-color: #f00;
}
</style>