CODEWITHSUNDEEP
javascripthtmlcsssuperfish
zomboble
zomboble

Reputation: 833

Css child selector :first-child, but select all children in targeted selector

Not sure if the title is a little vague or not,

However, lets say you have.. 

.topactive a:focus, .topactive a:hover, 
.sf-menu a:active:first-child, .sf-menu li.sfHover:first-child {
}

and in your html your looking at:

all the ul and li class declarations;

<ul class="sf-menu">
<li class="current">
<p class="topactive"><a href="#a">About Us</a></p>
        <ul class="menu2"><li>submenu</li></ul></li>
    <li>something</li>
        <ul><li>submenu</li></ul>
</ul>

I need it to target the left most li only.

Is the css selecting only "example", as in my current code it is, and i cannot select only the first level ul explicitly, its only selecting the first instance of ul.

I hope this makes sense, sorry for any ambiguity and thanks to those who helped on my other question.

Upvotes: 0

Views: 3183

Answers (2)

David Thomas
David Thomas

Reputation: 253308

To select only the first-level children of the top-most ul you need some way to explicitly reference the ancestor and the distance from said ancestor. I'd suggest using an id:

#idOfTopMostUL > li {
    /* CSS for the first-level li-elements */
}
#idOfTopMostUL ul li {
    /* CSS for other li elements, that are children of ul elements within the ul */
}

Which would require HTML such as:

<ul id="idOfTopMostUL">
    <li>example
        <ul><li>submenu</li></ul></li>
    <li>something
        <ul><li>submenu</li></ul></li>
</ul>

JS Fiddle demo.

Please note that I've corrected your HTML (a ul cannot be a direct child of another ul (or ol)).

If you don't want to, or can't, give your ul an id you can reference another ancestor outside of the ul (since the first-level li elements will be closer to that ancestor than the nested-lis):

<div id="parentDiv">
    <ul>
        <li>example
            <ul><li>submenu</li></ul></li>
        <li>something
            <ul><li>submenu</li></ul></li>
    </ul>
</div>

And CSS:

#parentDiv > ul > li {
    /* CSS for the first-level li-elements */
}
#parentDiv ul ul li,
#parentDiv ul li ul li {
    /* CSS for other li elements, that are children of ul elements within the ul */
}

JS Fiddle demo.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707158

The specific CSS you'er showing isn't selecting anything in the HTML you've shown us. The first two rules both require .topactive and that isn't present in your HTML. The next two rules both require .sf-menu and that isn't present in your HTML either.

If you want only the first level of children on an object, use the direct child designator > in your rules.

In the HTML you've actually shown us, you can select all first level li elements of your top level ul with this CSS:

body > ul > li

But, in the real world, you would probably designate your top level ul objects with a class or id and do something like this:

#myTop > li

or

.myTop > li

Where you put the myTop class or id on the top level UL elements.

Upvotes: 0

Related Questions