CSS selector to get the deepest element of a particular class in the HTML tree.

Question

I have a bunch of DIV elements in my HTML, some of which have an attribute of the "rowsLayout" class. Some of these Layout DIV lines can be nested. I want to define a CSS selector that is only for the deepest DIVs in these sockets. That is, I do not want any of the divs rowsLayout to contain any other div files rowLayout.

<div id="a" class="rowsLayout"> <div id="b" class="rowsLayout" /> <div id="c" class="rowsLayout"> <div id="d" class="rowsLayout" /> </div> </div> <div id="e" class="rowsLayout" /> 

In this structure, I want a selector that will target b, d and e.

Can this be done?

Answer 1

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

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

Your selector depends on the children (or lack thereof) on the objects you are aiming for.
CSS is designed in such a way that an element selector can always be resolved before child elements exist; this allows CSS to be applied when loading a document.

Answer 2

Not.

Your options: select them by id; add a second class for these leaves and select this class; use a javascript solution to set the appropriate style (possibly using the second class).

Answer 3

can you consider adding an extra class such as a “parent” to the parent elements? it would be simpler and would be "standard"

Answer 4

Depending on the number of divs, you can do something like:

 div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {} 

Perhaps there is a better way to solve your problem that you are trying to apply to all of these divs?

Answer 5

select them by id

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

any reason for all btw re-class names? You can wrap it all in a div from #layout or something else ...

 #layout div { /* styles */ } 

instead of adding this class name to the div.

Answer 6

Take a look at this:

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

Answer 7

Why not use: empty?

JQuery Empty

EDIT: It also works as a CSS selector:

 :empty { background-color: black; } 

MORE EDITORS:

:last-of-type almost works, but for some reason it gets an "a". Watch my violin.

http://jsfiddle.net/DUdVR/3/

Answer 8

It seems like this is possible using the: dir or: lang attribute.

Usage: lang is preferred in 2015 as it is supported by most browsers.

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"> ltr <div class=a> a </div> </div> <div lang=ar> <div class="container"> rtl <div class=a> a </div> </div> <div> <div class="container"> rtl <div class=a> a </div> </div> <div lang=ar> <div class="container"> rtl <div class=a> a </div> </div> </div> <div lang=en> <div class="container"> ltr <div class=a> a </div> <div lang=ar> <div class="container"> rtl <div class=a> a <div lang=en> <div class="container"> ltr <div class=a> a </div> <div> <div> <div lang=en> <div class="container"> ltr <div class=a> a </div> </div> </div> <div lang=ar> <div class="container"> rtl <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, it could theoretically behave like the deepest match, using for example: lang (deepest-overrides-all), although this is probably not where lang = deepest overrides - everything should be defined on an element.