Menu
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 another. I want to define a CSS selector that only targets the deepest DIVs in those nestings. That is, I don't want any of the rowsLayout DIVs that contain any other rowLayout DIVs.
<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" />
With this structure, I want a selector that will target b, d, and e.
Can this be done?
875
The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
Inline styles have the highest specificity. In our specificity weight system, they have a value of 1000. Let's try to make sense of it. The property values of selectors with a higher weight will always be applied over a selector with a lower weight.
ID selectors: ID selectors are the most specific. These select an element based on its ID attribute and have the syntax #idname.
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.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
