Target first level s and not the nested s

Question

I have the following HTML:

  
A
    

      
subsection
    
  
  
B
    <         


        

Answer 1

Here is an extended version of user @Spudley's answer - with a snippet.

Might save some people some time.

/* this will affect all levels of li */
.myclass ul li {
  color: red;
}


/* this will only affect level 1 */
.myclass>ul>li {
  color: green;
}


/* this will only affect level 2 */
.myclass>ul>li>ul>li {
  color: blue;
}


/* this will only affect level 3 */
.myclass>ul>li>ul>li>ul>li {
  color: aqua;
}


* {
  font-family: arial;
}

  

    
Level 1
      

        
Level 2
          

            
Level 3
            
Level 3
          
        
        
Level 2
        
Level 2
          

            
Level 3
            
Level 3
            
Level 3
              

                
Level 4
                
Level 4
              
            
          
        
      
    
    
Level 1