Cyclic css rules for alternating background color of nested elements

Question

I have a dynamic page where the user can add as many div inside other div as he wants. Each div has a background color and I want the background color to repeat itself every 3 divs.

Currently, I'm writing the css rules like this

div {
  padding-top: 20px;
  margin-left: 10px;
}

div {
  background-color: blue;
}

div>div {
  background-color: red;
}

div>div>div {
  background-color: green;
}

div>div>div>div {
  background-color: blue;
}

div>div>div>div>div {
  background-color: red;
}

div>div>div>div>div>div {
  background-color: green;
}

div>div>div>div>div>div>div {
  background-color: blue;
}


/* and it continues... */

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Is there another way to do it with CSS?

and what is the purpose? they need to be nested? you only need the visual? .. it's somehow a strange structure — Temani Afif
– Temani Afif, Commented Aug 31, 2018 at 15:24
you create a div dynamically with what language? just handle it with adding class while you creating dynamic divs. — Alireza
– Alireza, Commented Aug 31, 2018 at 15:27
you must be using js to "add as many div inside other div as he wants", so you can find out the current iteration and change the color? — Chamuth Chamandana
– Chamuth Chamandana, Commented Aug 31, 2018 at 15:31

Temani Afif · Accepted Answer · 2018-08-31 15:35:22Z

5

This is not a direct answer but in case you can nest alternate elements (div, section for example) here is an idea how you can do with pure CSS. The trick is to use CSS variable to control background-position and you increment it for each child so you move the background to the next color. You need alternate elements to be able to achieve the incrementation, with one element we will have cycle and it won't work.

:root {
 --i:1;
 --j:1;
}

div,section {
  padding-top: 20px;
  margin-left: 10px;
  background: 
    repeating-linear-gradient(to bottom, 
      blue 0, blue calc(100%/3), 
      red calc(100%/3), red calc(2*100%/3), 
      green calc(2*100%/3), green 100%);
  background-size:100% 300%;
}
section {
 --j:calc(var(--i) + 1);
 background-position:0 calc(var(--j) * 100%);
}

div {
 --i:calc(var(--j) + 1);
 background-position:0 calc(var(--i) * 100%);
}

<div>
  <section>
    <div>
      <section>
        <div>
          <section>
            <div>

            </div>
          </section>
        </div>
      </section>
    </div>
  </section>
</div>

answered Aug 31, 2018 at 15:35

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Domino Over a year ago

Writing something that uses classes probably solves the OP's question better, but upvoting for the clever combination of background-position and repeating gradient. I would have never thought of doing that.

Temani Afif Over a year ago

@JacqueGoupil before even this, writing clean code is the first think to do, I don't see the need of nesting element .. but since we are there let's provide some trick as they may be useful for real situation ;)

Collectives™ on Stack Overflow

Cyclic css rules for alternating background color of nested elements

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related