Repeating a set of colors on nested divs with CSS

Question

I have a set of four colors and I want to apply them to the nested divs, so each next child has a different color. If there is a fifth level of nesting I want to start over at first color and have this ongoing even if I have infinite deep levels of nesting. Is this possible to do with CSS selectors only and avoid JavaScript?

I'm currently stuck at following code - as you can see pink keeps getting applied to all nested divs after the 4th.

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
}

div {
  color: red;
}

div>div {
  color: blue;
}

div>div>div {
  color: green;
}

div>div>div>div {
  color: pink;
}

<div>
  1
  <div>
    2
    <div>
      3
      <div>
        4
        <div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

We can use hue-rotate to give the desired effect. By setting the filter at 90deg it will repeat every 4 children. By specifying the starting colour as blue and rotating the hue 90 deg, we get red.

I don't think it's possible to specify four different colours in the manner you're asking using pure css unless you're willing to repeat div > div > ... for a theoretical maximum nest?

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
  color: blue;
  filter: hue-rotate(90deg) saturate(2.5);
}

<div>1
  <div>2
    <div>3
      <div>4
        <div>1
          <div>2
            <div>3
              <div>4
                <div>1
                  <div>2
                    <div>3
                      <div>4
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example with lorem ipsum text:

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
  color: blue;
  filter: hue-rotate(90deg) saturate(2.5);
}

<div>Mauris rhoncus sollicitudin egestas. Donec eu est est. Phasellus neque justo, faucibus in nisl dignissim, aliquet luctus orci. Fusce bibendum libero ac lectus consequat, in scelerisque orci tempus. Donec aliquam, diam quis dignissim laoreet, magna urna
  mattis libero, non vehicula purus ante nec ipsum. In aliquet ipsum id risus ultrices pellentesque. Sed lobortis ante eget nisi lobortis, sit amet ornare neque lacinia. Donec auctor mauris varius lorem fermentum congue. Suspendisse porta, lorem at molestie
  volutpat, neque justo tempor diam, vel mattis ipsum neque sollicitudin odio. Morbi tincidunt purus eu tellus lobortis euismod id sit amet nulla. Etiam vitae ante eu enim tincidunt laoreet eget nec dolor. Proin varius, risus sed fringilla condimentum,
  ligula dui porta purus, id congue nisl dui id risus. Integer elementum lacus a iaculis pretium. Cras erat lorem, mollis facilisis lectus in, pharetra vulputate augue. Suspendisse quis eleifend enim. Suspendisse at volutpat ex.
  <div>Etiam vitae orci a quam dictum viverra nec id enim. Nam ac sapien at diam commodo elementum. Proin elementum, sem non cursus euismod, risus ante consectetur lectus, eu tempus lacus ipsum id ligula. Donec pretium eros vel tellus fermentum, vitae iaculis
    risus rutrum. Aenean pulvinar fringilla condimentum. In accumsan varius volutpat. Nullam vitae aliquam nunc. Nam in luctus nisl, in pellentesque turpis. Fusce eu pulvinar lacus. Duis suscipit rhoncus velit, vel laoreet nibh fermentum ut. Etiam pulvinar
    odio id felis imperdiet suscipit. Duis dictum dignissim tortor et iaculis.
    <div>Mauris vulputate, leo in sodales eleifend, massa nunc mollis tortor, nec commodo lacus tortor id ante. Quisque porttitor nulla et cursus molestie. Praesent laoreet tincidunt massa at auctor. In et faucibus odio. Duis sit amet ultrices massa, efficitur
      rutrum augue. Integer laoreet ante vitae venenatis ultrices. Aenean quis enim ut lacus scelerisque consequat in id sapien. Integer quam tortor, ornare vel tellus id, hendrerit hendrerit leo. Cras in est at urna rutrum imperdiet. Nulla convallis
      tortor tincidunt massa accumsan, quis suscipit risus eleifend. Aenean justo risus, commodo sit amet lacus sit amet, vulputate commodo nisl.
      <div>Aenean in justo quis mi dictum ultrices non et ligula. Phasellus porttitor gravida magna, vitae placerat sapien maximus et. Curabitur vel neque quis diam commodo tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
        ac turpis egestas. Morbi ut leo non est tristique blandit. Vestibulum eu ullamcorper lorem. Nulla massa elit, auctor a lacus vel, rutrum euismod lectus. Integer vel quam vel sapien finibus placerat bibendum quis massa. In et dolor eu enim vulputate
        convallis nec sit amet purus. Etiam metus ante, iaculis nec gravida nec, vulputate et nisl. Fusce et nunc quis nulla condimentum vestibulum.
        <div>Donec consectetur, nisl sed blandit pharetra, tortor lectus ullamcorper leo, vel rhoncus nisi massa ut ligula. In at ligula ut nisi porttitor congue. Aliquam eget venenatis nisl, eget varius augue. Etiam vel metus et diam finibus tristique. Nullam
          gravida commodo neque ac accumsan. Nunc venenatis fermentum tellus, at consectetur arcu feugiat ut. Pellentesque nec pretium elit, vitae facilisis elit. Nam porttitor molestie aliquam. Ut elementum quam ac bibendum porttitor. Duis lacinia, orci
          et malesuada sollicitudin, arcu nisi sodales urna, consectetur feugiat metus dolor sit amet lacus. Nullam consequat gravida magna, sed pellentesque purus rhoncus et. Vivamus tempor dignissim convallis. Praesent sagittis tincidunt pretium. Vivamus
          vitae posuere nibh.
          <div>Vivamus pellentesque, ante in posuere ullamcorper, urna quam pulvinar neque, nec facilisis libero augue id lectus. Proin nec nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet vehicula eros. Etiam euismod
            erat sit amet vulputate porta. Integer non elementum lacus. Donec iaculis enim vel arcu aliquam, eu vulputate lorem pharetra. Praesent sed ex vel odio rutrum scelerisque. Proin et lobortis nunc. Praesent varius, tortor vel pellentesque rhoncus,
            ante augue tristique tellus, nec finibus justo nisi a dolor. Donec molestie orci arcu, nec pharetra purus tempor vitae. Donec tempor est sit amet lorem lobortis, ac gravida ipsum congue. Donec eget consequat nulla. Sed cursus vulputate porta.
            Quisque tempus, nibh ut blandit semper, massa metus dapibus felis, sit amet imperdiet purus tellus id risus. Vestibulum id consequat mauris.
            <div>Ut tristique porttitor magna, ut eleifend urna. Quisque metus magna, sagittis aliquet pulvinar id, fringilla eget turpis. Nam mollis fringilla magna, at tincidunt sapien pulvinar id. Nam hendrerit sed urna sed finibus. Maecenas mollis enim
              eu sem dictum consequat. Morbi gravida augue ac magna ornare auctor. Sed laoreet id sem a laoreet.
              <div>Cras eu augue sollicitudin, ullamcorper enim et, laoreet mauris. Pellentesque eget pretium erat. Ut ac tincidunt eros. Etiam eu nisi dui. Ut placerat et orci ut dapibus. Ut vitae tellus enim. Quisque nunc arcu, aliquam in blandit nec, ultrices
                ut tellus. Phasellus maximus euismod odio ut luctus. Nunc sollicitudin est tellus, et hendrerit elit egestas eget. Nulla vestibulum sollicitudin finibus. Phasellus ornare nulla nulla, et fringilla ex tempus vel. Aliquam bibendum ultricies
                tortor non cursus. Quisque eleifend velit lorem, et ultricies felis iaculis vitae. Pellentesque eu sapien et nisl facilisis pulvinar nec non augue. Nunc ultrices metus sem, ac ornare risus ultricies eget. Maecenas efficitur rutrum dignissim.


                <div>Nam justo erat, dictum et quam eu, tempor sagittis justo. Fusce auctor vitae libero sit amet tempus. Aenean tempus lacus nisl, vitae luctus nisi aliquet vel. Integer mattis risus quis leo mollis, eu laoreet ante semper. Vestibulum mollis
                  nisl non est aliquet efficitur ac ut turpis. Aenean convallis eget velit in finibus. Donec placerat, libero in mattis convallis, leo lectus pretium leo, nec scelerisque tellus massa in ipsum. Aliquam pulvinar ante et tincidunt bibendum.
                  Mauris scelerisque arcu in lorem semper, in finibus diam ultrices.
                  <div>Ut ornare, nunc varius tincidunt venenatis, arcu elit euismod tortor, ut vehicula urna tellus in tortor. Cras non placerat turpis, ac molestie nibh. In elementum id felis sed bibendum. Cras aliquet dolor quis bibendum dictum. Nullam
                    varius velit ut felis condimentum mattis. Ut dapibus ex vitae lectus sollicitudin imperdiet at eget mauris. Nulla facilisi. Vivamus lacus sem, aliquam ac eros ut, condimentum hendrerit quam. Maecenas non odio purus. Vivamus commodo
                    et lectus vitae consequat. Integer fermentum volutpat mauris, sit amet fringilla sapien pharetra vel. Vestibulum egestas rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
                    sed turpis ac nunc feugiat ultrices nec ut lorem. Sed risus turpis, molestie sit amet congue eget, vestibulum eu risus. Proin ullamcorper eleifend mauris, et commodo velit tempor vel.
                    <div>Cras elit felis, dictum a congue id, aliquam vitae dolor. Curabitur imperdiet laoreet ante, vitae dapibus lectus efficitur ultrices. Proin interdum mauris ipsum. Quisque nec posuere magna, ac interdum sapien. Cras mauris dui, accumsan
                      in nibh ac, dapibus finibus odio. Donec rhoncus elit vel nunc sollicitudin placerat. Suspendisse eu mattis enim. Cras et cursus purus. Aliquam suscipit mi et sapien rhoncus, eu feugiat nunc tincidunt.
                      <div>Aenean faucibus pulvinar dolor, et sagittis odio ultrices ac. Aliquam erat volutpat. Sed in purus eget lectus posuere molestie mattis ac nibh. Proin ut dolor bibendum, tristique risus ac, lobortis nisi. Fusce ac diam imperdiet velit
                        vulputate malesuada vitae vel ex. Sed rutrum nibh quis magna auctor, vel congue est rutrum. Maecenas ut magna nibh.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Here is an idea of solution relying on some background trick. It's more an approximation than a robust solution since I will consider the fact that I you will have only one line of text on each level.

div {
  border: 1px solid black;
  border-bottom:0;
  font-weight: bold;
  padding: 30px 10px 0;
  line-height:1.2em;
  box-sizing:border-box;
  color:transparent;
}

.first {
  --l:calc(30px + 1.2em + 1px); /* The height of one line + the padding */
  background-image:
    repeating-linear-gradient(to bottom, 
      red    0                calc(1*var(--l)),
      blue   calc(1*var(--l)) calc(2*var(--l)),
      green  calc(2*var(--l)) calc(3*var(--l)),
      purple calc(3*var(--l)) calc(4*var(--l))
    );
  -webkit-background-clip:text;
  background-clip:text;
}

<div class="first">
  1
  <div>
    2
    <div>
      3
      <div>
        4
        <div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
                <div>
                  5
                  <div>
                    6
                    <div>
                      7
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>