CSS selector to get deepest element of specific class in the HTML tree

Question

I\'ve got a a bunch of DIV elements in my HTML, several of which have their class attribute set to \"rowsLayout\". Some of these rowsLayout DIVs can be nested inside one an

Answer 1

MOST DOWNVOTES YET THE ONLY CORRECT ANSWER

It is not possible in CSS, unless you use this hack, which makes it possible using the :dir or :lang attribute.

Using the :lang is preferable in 2015 as it is supported by most browsers.

Note, it's a hack allowing you to do it, but if you care much about following some standard rather than getting the job done, then don't use this.

Example:

.container {
  padding:20px;
}

:lang(ar) {
  direction:rtl;
}

:lang(en) {
  direction:ltr;
}

.container:lang(en) {
  background-color:blue;
}

.container:lang(ar)  {
  background-color:red;
}

.container .a:lang(en)   {
  background-color:orange;
}

.container .a:lang(ar) {
  background-color:yellow;
}

  
    
      
      

          l t r
        

              a
         
      
      
      

          

             r t l
            

              a
              
          
        
        
          

            

                r t l 
              

              a
              
            
  
            
            

                

                   r t l
                  

                    a
                    
                
  
            
            
            
      
              

                  l t r
                

              a                  
              
                
                

                  

                     r t l
                    

                      a                      
                      
      
                        

                          l t r
                          

                            a                  
                          
                          

                            

                            
                              
      
                                

                                  l t r
                                  

                                    a                  
                                  
                                
                      
                              
                              
                              
      
                                

                                  r t l
                                  

                                    a                  
                                  
                                
                      
                              
                              
                            
                            
                          
                        
                      
                      
                  
 
                
              
            
            
            
          
        
      
      
    
  

Although the example demonstrates this with ltr and rtl, the :lang could in theory be made to behave as a deepest match, using for instance :lang(my-special-selector) although that is probably not how lang attribute is supposed to be used.