CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
Vladimir
Vladimir

Reputation: 846

Zebra-like css styling for nested DIVs

I have nested DIV elements, for which I don't know the levels of nesting. I need each to have different background than its parent creating a zebra-like colors. I am using only two backgrounds - dark and white. The effect needs to be similar to styling odd and even children in a container but in my case the children are nested. I can do this with rules for each nested element such as:

div  div  div  div {
    background-color: #fff;
}

div  div  div {
    background-color: #aaa;
}

div  div {
    background-color: #fff;
}

div {
    background-color: #aaa;
}

But I'm looking for more elegant solution. Can this be done only with CSS? Do I need javascript?

Any suggestions will be much appreciated.

Edit: I am looking for a solution which will not require the elements to have a class, since they will need to be rearranged with drag & drop (javascript)

Upvotes: 4

Views: 678

Answers (1)

Ben Lee
Ben Lee

Reputation: 53349

UPDATE: this solution is no longer relevant given the update to the question. Leaving it here for reference though.

I would just use "even" and "odd" classes (or something equivalent):

div.even {
    background-color: #fff;
}

div.odd {
    background-color: #aaa;
}

And then in the HTML:

<div class="even">
    <div class="odd">
       <div class="even">
           <div class="odd">
               ...
           </div>
       </div>
    </div>
</div>

Upvotes: 1

Related Questions