Properties applying to children although using direct descendant selector ">"

Question

I am using .class > ul > li.

Basically I would like to know why there are some properties that work as expected (like border) but others as text-transform, color or font-size affect the list inside the list.

Here's an example: FIDDLE

I find really annoying the need to use .class ul li ul li to "undo" the text style that I want just on the first direct <li> child.

Any links with docs that would allow me to learn how this selector really works will be greatly apreciated.

Answer 1

This is the normal behaviour it is called inheritance.
Some css properties are inherited from their parent whereas other aren't.

Inheritance

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary. [MDN]

List of inherited properties

azimuth             border-collapse    border-spacing        caption-side
color               cursor             direction             elevation
empty-cells         font-family        font-size             font-style
font-variant        font-weight        font                  letter-spacing
line-height         list-style-image   list-style-position   list-style-type
list-style          orphans            pitch-range           pitch
quotes              richness           speak-header          speak-numeral
speak-punctuation   speak              speech-rate           stress
text-align          text-indent        text-transform        visibility
voice-family        volume             white-space           widows
word-spacing

Extracted from w3.org on 17/03/15

---

The all property

This property allows to control CSS inheritance with the initial | inherit | unset values :

The CSS all shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. [MDN]

This property currently has the status of "Candidate Recommendation" but the major modern borwsers (except safari) have implemented it.

---

For your example case :

The border property doesn't inherit so the child elements won't have a border event though the parent does.

But font-size, color and text-transform are properties that inherit to the child elements. Therefore the second level list item has the same font-size, color and text-transform as it's parent.

Conclusion :
The selector you are using is correct and targets only the first level list items but some properties like color are inherited to the second level list items.

Answer 2

As you did not define style for your inner ul will have the same style as its parent.

What you have to do is wrap the text in a span

<div class="menu ">
  <ul>
    <li><span>This is uppercase red</span>
        <ul>
            <li>this should not be uppercase or red</li>
            <li>this should not be uppercase or red</li>
            <li>this should not be uppercase or red</li>                
        </ul>
    </li>
  </ul>
</div>

And apply your css definition to .menu>ul>li>span