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

i trying render background color on list item first child of unordered list.

html structure 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 apply background color on first child element did

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

it renders orange background list items. i've played slight variations doesn't make difference.

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

here demo

use following:

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

working jsfiddle here

you trying style first .nav item - there 1 of. change style first li direct child of .nav.

if want more specific use:

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