Question

I am not sure why my child selector isn’t working properly. In my example, only the direct <li> tag should have the red color. But instead, all <li> tags are colored red.

This is the jQuery fiddle of my problem:

http://jsfiddle.net/5Jf4Y/2/

Answer 1

My guess is that both your selectors have the same specificity + the color property is inherited.

The color property is inherited.

Set first the default color for <li> elements and apply a different color for the direct children .courses > ul > li:

.courses ul li { 
    color: Black;
    margin-left: 40px; 
}​

.courses > ul > li { 
    color: #9E002E; 
    font-size: 20px; 
}

DEMO