I have nested divs and need a more efficient way to select them
I have this HTML structure which is mainly composed of nested divs. I need to alternate color based on the position of the nested div. Thus, the parent must be one color and the child must be different, alternating depending on the nested elements.
<div class="indent">
<div class="indent">
<div class="indent">
<div class="indent">
<div class="indent"></div>
</div>
</div>
</div>
</div>
<div class="indent">
<div class="indent">
<div class="indent"></div>
</div>
</div>
<div class="indent">
<div class="indent"></div>
</div>
And I have this CSS that I need to figure out how to improve to be more efficient for choosing alternating nested tags.
.indent{
padding-bottom: 20px;
padding-right: 10px;
background:#dfdfdf;
}
.indent > .indent{
background:#fff;
}
.indent > .indent > .indent{
background:#dfdfdf;
}
.indent > .indent > .indent > .indent{
background:#fff;
}
.indent > .indent > .indent > .indent > .indent{
background:#dfdfdf;
}
Is there a more efficient way to select alternative subtags you would like to know?
source to share
I would add an extra class to the div. Save the class indent
for the general layout and add classes such as level-1
, level-2
, level-3
, level4
...
I don't think there is a CSS selector that allows you to specify the level.
In your current setup, it indent > indent
will not only match the second level divs, but also the third and fourth level divs. It's not a problem if you are overwriting all declared properties in a more specific selector, but if you only want to make the level 2 font larger, you will need to make it smaller for level 3 explicitly.
But if you cannot add classes level
, then this is what you need to do as there are no more convenient selectors to make it easier.
You can use multiple selectors, for example, to add extra levels by adding an extra selector:
.indent {
padding-bottom: 20px;
padding-right: 10px;
}
.indent > .indent,
.indent > .indent > .indent > .indent {
background: #fff;
}
.indent,
.indent > .indent > .indent,
.indent > .indent > .indent > .indent > .indent {
background: #dfdfdf;
}
source to share
If you've split your classes so that you have an original indentation class and then another class that only applies color, you can clean things up a bit. Here's an example:
<div class="indent grey">
<div class="indent white">
<div class="indent grey">
<div class="indent white">
<div class="indent grey"></div>
</div>
</div>
</div>
</div>
<div class="indent grey">
<div class="indent white">
<div class="indent grey"></div>
</div>
</div>
<div class="indent grey">
<div class="indent white"></div>
</div>
Then your CSS will be minified to:
.indent{
padding-bottom: 20px;
padding-right: 10px;
}
.white{
background:#fff;
}
.grey{
background:#dfdfdf;
}
Alternatively, you can use the nse-child (odd) and nth-child (even) pseudo selector. You will need to rewrite your markup so that all your siblings are connected to each other.
source to share