CODEWITHSUNDEEP
htmlcsscss-selectorschildren
user2875605
user2875605

Reputation: 21

Select ul li child not grandchildren

I found a CSS selector to select a child li and not grandchild li from the parent ul:

parentulid > li

see here

But how to select the same from a top parent div, nested like this?

<div id="header">
    <ul id="Head">
        <li>one</li>
        <li>
            two has children
            <ul>
                <li>a</li>
                <li>b</li>
            </ul>
        </li>
        <li>
            three has children
            <ul>
                <li>x</li>
            </ul>
        </li>
    </ul>
</div>

this doesn't work :

#header > ul li {
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

because grandchildren li are affected too.

Upvotes: 2

Views: 2159

Answers (3)

Marcel
Marcel

Reputation: 375

Do you mean somthing like this ?

#header > ul > li > ul li{
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

http://jsfiddle.net/wVMb8/

Upvotes: 0

Ennui
Ennui

Reputation: 10190

You need to use the child selector again like so:

#header > ul > li{
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

This selects all li elements that are an immediate child of any ul element that is itself an immediate child of #header. Your previous selector #header > ul li selects all li descendants (including in nested uls) of any ul that is an immediate child of #header.

Basically, #header > ul li would select ANY li that is a descendant node in the DOM of any ul that is a direct descendant (child) of #header, even if it is nested in 1 or 2 or 10 more sublists. By contrast #header > ul > li ONLY selects immediate descendant li elements of immediate descendant ul elements from #header.

Upvotes: 3

elixenide
elixenide

Reputation: 44851

Use > again, like #header > ul > li. This will only match lis that are direct descendants of uls that are direct descendants of #header.

Upvotes: 6

Related Questions