CODEWITHSUNDEEP
htmlcsscss-selectors
Bounce
Bounce

Reputation: 2105

Selecting child items

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 ?

Upvotes: 1

Views: 49

Answers (2)

Quentin
Quentin

Reputation: 944445

You are trying to match "A list item that is a member of the active class" (li.active) but you are saying "A member of the active class that is a descendent of a list item" (li .active).

Get rid of the space.

Upvotes: 1

bricker
bricker

Reputation: 8941

#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.

Upvotes: 4

Related Questions