CSS first-child pseudo class with unordered list (Bootstrap)

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>

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


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;