CODEWITHSUNDEEP
csscss-selectors
Corey
Corey

Reputation: 1195

CSS class selector issue

Why doesn't this work? I'm new to CSS, and I don't know why the following won't work.

<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;
}

Upvotes: 1

Views: 137

Answers (3)

nathant23
nathant23

Reputation: 113

Try:

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

Upvotes: 0

xaoax
xaoax

Reputation: 141

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;

Upvotes: 0

BalusC
BalusC

Reputation: 1108632

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;
}

Upvotes: 6

Related Questions