Question

This problem seems very simple, however I cannot get this to work.

I have the following simple markup.

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

How can I select the first item from the list that is a li element? (i.e. not the div).

I have tried many different ways… like this

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

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

But I can’t seem to make anything work.

Answer 1

To get the first element of its type regardless of other elements of different types, you’ll normally use the :first-of-type CSS3 pseudo-class.

But here, it’s not valid HTML to have a div as a child of a ul in the first place, so you ought to move that inner div out. It should then be enough to use :first-child as per your second rule since a ul can only have li elements as children:

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