具有无序列表的CSS第一子级伪类（Bootstrap）

Question

I am trying to render a background color on the list item that is the first child of the unordered list.

HTML structure is as follows

<div class="nav-collapse">
    <ul class="nav">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
    </ul>
</div> 

and to apply the background color on the first child element I did

.nav-collapse > .nav:first-child {
    background-color: orange;
}

It renders orange background to all list items. I've played with slight variations but it doesn't make difference.

.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child

Here is the Demo

Answer 1

Use the following:

.nav > li:first-child {
    background-color: orange;
}

Working jsFiddle here

You were trying to style the first .nav item - which there is only one of. Simply change it to style the first li that is a direct child of .nav .

If you want to be more specific use:

.nav-collapse > .nav > li:first-child {
    background-color: orange;
}

Answer 2

You can do it in many ways, try this too

ul.nav > li:first-child {
    background-color: orange;
}