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

Question

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.

I read it three times but couldn't get what you want or facing. — gdoron, Apr 19 '12 at 12:17
Oops sorry! I need the css to target the first level of li if that makes sense? Nothing beyond ul li, but every first level li. I have updated my op. — zomboble, Apr 19 '12 at 12:20
I was going to comment on the accepted answer to your other question talking about how `:first-child` isn't enough to select just the top-level element. — BoltClock, Apr 19 '12 at 12:23
I apologise for the wording and phrasing of my question, however I have found a method to fix this below and will accepted when the timer allows me. Thanks for the perseverance! — zomboble, Apr 19 '12 at 12:28

David Thomas · Accepted Answer · 2012-04-19T12:29:33.277

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.

Thanks, I will accept this when I can, this method using the > works well thanks :-) sorry for my very bad worded question! — zomboble, Apr 19 '12 at 12:27
Don't worry too much about it, though obviously the more clearly you can express your question/problem the easier it is for us to help you. And you're absolutely welcome; I'm glad to have been of help! =) — David Thomas, Apr 19 '12 at 12:30

jfriend00 · Answer 2 · 2012-04-19T12:26:05.063

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.

This selector isn't enough because every `li` is a child of a `ul`; you'll have to anchor the `ul` selector to some other parent that isn't shown in the markup. — BoltClock, Apr 19 '12 at 12:24

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

2 Answers2