Как получить первого ребенка, который является конкретным элементом?

Question

Эта проблема кажется очень простой, однако я не могу заставить ее работать.

У меня есть следующая простая разметка.

<div id="left_pane">
<ul>
<div id="indicator"></div>
<li>Something</li>
<li>Something else</li>
</ul>
</div>

Как выбрать первый элемент из списка, которыйтакое li элемент?(т.е. не div).

Я пробовал много разных способов ... как это

#left_pane ul:first-child li {
    /* style */
}

#left_pane li:first-child {
    /* style */
}

Но я не могу заставить что-либо работать.

Answer 1

Чтобы получить первый элемент своего типа независимо от других элементов разных типов, вы обычно будете использовать псевдокласс :first-of-type CSS3.

Но здесь недопустимо, чтобы HTML имел div в качестве потомка ul, поэтому вы должны переместить этот внутренний div наружу. Тогда должно быть достаточно использовать :first-child согласно второму правилу, поскольку ul может иметь только li элементов в качестве дочерних элементов:

#left_pane li:first-child {
    /* style */
}