trouble selecting the first child of nested elements

Question

I'm trying to select the first line item (<li>) with the class "subnav".

I just cannot seem to get it:

html:

<nav>
<ul class="navigation">

 <li class="logo"><ul>
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="index.htm">home</a></li>
   </ul></li>
<li class="subnav"><ul>
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
       <li><a href="design.htm">design</a></li>
   </ul></li>
  <li class="subnav"><ul>
    <li><a href="flooring.htm">flooring</a></li>
    <li><a href="paneling.htm">paneling</a></li>
    <li><a href="beams.htm">beams</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="shelving.htm">shelving</a>
    </li><li><a href="mantels.htm">mantels</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="news.htm">news</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="woodtypes.htm">wood types</a></li>
    <li><a href="phrases.htm">phrases</a></li>
</ul></li>

</ul>
</nav>

What would be the CSS selector be for the first instance of the line item with the class "subnav"?

`li` stands for *list* item, not *line* item :) – BoltClock Mar 25 '12 at 14:47 — BoltClock, Mar 25 '12 at 14:47

BoltClock · Accepted Answer · 2012-03-25T14:55:18.000

1

If the first .subnav item starts right after a single .logo item, you can use

li.logo:first-child + li.subnav

Notice that the :first-child in your markup is actually .logo, and not one of the .subnav items. If you were trying to use li.subnav:first-child, that's the reason why it doesn't work.

edited Mar 25 '12 at 14:55

answered Mar 25 '12 at 14:46

BoltClock

700,868
160
1,392
1,356

thanks, that has worked. As a novice it seems a tricky one to remember - I'm not sure if I could replicate that method in the future because I don't get the logic of having to select the logo first? Surely there must be a way to select the first child based upon class? – Doug Fir Mar 25 '12 at 14:57
@Doug Firr: Unfortunately CSS doesn't provide a selector for matching the first child with a class. I came up with a somewhat verbose yet versatile trick that involves an overriding rule, which you can see in [this answer](http://stackoverflow.com/a/8539107/106224), but your structure allows for a simpler approach which I went with here. There's a note about the possibility of allowing this with CSS4 selectors in that answer as well, but that's for the somewhat distant future... – BoltClock Mar 25 '12 at 14:59
so no first child selector based on class for now - thanks for the info. You really helped me out with that selector too – Doug Fir Mar 25 '12 at 15:08

score 0 · Answer 2 · answered Mar 25 '12 at 14:57

0

Just use

"li.subnav:first"

If you are using jQuery, then you can get first subnav with:

$("li.subnav:first")

Hope this helps.

answered Mar 25 '12 at 14:57

Kosta

1,817
1
16
21

You **have** to use jQuery or some other selector library with this. `:first` isn't a CSS selector. – BoltClock Mar 25 '12 at 15:00

trouble selecting the first child of nested elements

2 Answers2