проблема выбора первого дочернего элемента вложенных элементов

Question

Я пытаюсь выбрать первую позицию (<li>) с классом «subnav».

Я просто не могу показаться, чтобы получить его:

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> 

Что бы селектор CSS быть для первого экземпляра элемента строки с «subnav» класса?

Answer 1

Если первый .subnav пункт начинается сразу после того, как один .logo элемента, вы можете использовать

li.logo:first-child + li.subnav 

Обратите внимание, что :first-child в разметке на самом деле .logo, а не один из .subnav пунктов. Если вы пытались использовать li.subnav:first-child, это причина, почему он не работает.

Answer 2

Просто используйте

"li.subnav:first" 

Если вы используете JQuery, то вы можете получить первый subnav с:

$("li.subnav:first") 

Надеется, что это помогает.