Question

I have HTML code:

<ul id="top_nav">
<li >
    <a href="#">
        <span>About</span>
    </a>
</li>
<li class="active">
    <a href="#"><span>News</span></a>
    <ul>
        <li class="active">
            <a href="#">
                <span>News1</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>News2</span>
            </a>
        </li>
    </ul>
</li>
<li>
    <a href="#">
        <span>Contacts</span>
    </a>
</li>

I need to select News1 item. I try:

#top_nav li ul li .active a span{
    color:#ff0000;
}

But still no good. You can try by yourself at http://jsfiddle.net/dCGQ2/2/

So any ideas about that ?

Answer 1

#top_nav li ul li.active a span

Notice no space before .active. That means that the element (li in this case) has the class active. With a space, it means a child element with class active.