Applying CSS styling to only the first <li> in the root of a nested list

css, html

Solution

use the child selector:

#menu-navigation>li:first-child{
   color:red;
}​

For example: http://jsfiddle.net/w47LD/3/

Problem

i want to apply the CSS only first li but `:first-child` apply to all first child of every ul here is my CODE ``` #menu-navigation li:first-child{ color:red; }​ ``` When applied to this HTML: ``` <ul class="nav" id="menu-navigation"> <li>Home</li> <li>About Us <ul> <li>Our Team</li> </ul> </li> </ul>​ ``` ...both "Home" and "Our Team" turn red.

Original source