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

No.

Your options are: select them by id; add a second class for those leaves, and select by that class; use a javascript-based solution to set the appropriate styling (possibly using the second class).

Answer 2

can you consider an option of adding an extra class such as "parent" to the parent items? it would be easier and is the "standard"

Answer 3

Take a look at this:

div#b:first-of-type {
style here
}

Answer 4

select them by ID

#b, #d, #e {
 /* styles here */
}

any reason for all the repeat class names btw? You could wrap the whole thing in div of #layout or something then do...

#layout div {
 /* styles */
}

instead of adding that class name to ever div.

Answer 5

You can use the jQuery selector .rowsLayout:not(:has(.rowsLayout)).

However, for performance reasons, this is not possible in CSS.

Your selector depends on the children (or lack thereof) of the elements that you target.
CSS is designed so that an element's selectors can always be resolved before the element's children exist; this allows CSS to be applied as a document loads.

Answer 6

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;
}

<div id="searchHere">
  
    <div lang=en>      
      <div class="container">
          l t r
        <div class=a>
              a
         </div>
      </div>
      
      <div lang=ar>
          <div class="container">
             r t l
            <div class=a>
              a
              </div>
          </div>        
        
          <div>
            <div class="container">
                r t l 
              <div class=a>
              a
              </div>
            </div>  
            
            <div lang=ar>
                <div class="container">
                   r t l
                  <div class=a>
                    a
                    </div>
                </div>  
            </div>
            
            <div lang=en>      
              <div class="container">
                  l t r
                <div class=a>
              a                  
              </div>
                
                <div lang=ar>
                  <div class="container">
                     r t l
                    <div class=a>
                      a                      
                      <div lang=en>      
                        <div class="container">
                          l t r
                          <div class=a>
                            a                  
                          </div>
                          <div>
                            <div>
                            
                              <div lang=en>      
                                <div class="container">
                                  l t r
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                              <div lang=ar>      
                                <div class="container">
                                  r t l
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>                      
                      </div>
                  </div> 
                </div>
              </div>            
            </div>
            
          </div>
        
      </div>
      
    </div>
  
</div>

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.