Pfthb

I'm trying to apply some CSS styles on a very basic html demo in order to get this result. (Only Item 1.1 and Item 1.2 as lowercase letter)

• ITEM 1
  
  
  • Item 1.1
  
  
  • Item 1.2
  
  


• ITEM 2


• ITEM 3

These are the html and css code snippets.

index.html

<ul id="list">
 <li>Item 1
 <ul>
 <li>Item 1.1</li>
 <li>Item 1.2</li>
 </ul>
 </li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

styles.css

ul#list > li
 text-transform: uppercase;

Which gives me the following result.

• ITEM 1
  
  
  • ITEM 1.1
  
  
  • ITEM 1.2
  
  


• ITEM 2


• ITEM 3

So as you can see the text-transform property is been applied on every li element even though ITEM 1.1 and ITEM 1.2 are not direct children of ul#list

This seems to be like the behavior of a descendant selector:

ul#list li
 text-transform: uppercase;

text-transform is an inherited property. Specifying it on a parent also copies it down to children. Obvious, Just because you didn't set any primary property for child elements. So by default its taking that property as primary ,

ul#list > li
text-transform: uppercase;


ul#list li 
 text-transform: none;


ul#list>li 
 text-transform: uppercase;

<ul id="list">
 <li>Item 1
 <ul>
 <li>Item 1.1</li>
 <li>Item 1.2
 <ul>
 <li>Item 1.1.1</li>
 <li>Item 1.2.1</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

This is because you did not specify any NORMAL CSS for <li>

You can simply achieve this by above ul#list > li

li

text-transform: none;


Please refer to this for details:
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors