Wiederholen einer Reihe von Farben für verschachtelte Divs mit CSS

8

Ich habe vier Farben und möchte sie auf die verschachtelten Divs anwenden, damit jedes nächste Kind eine andere Farbe hat. Wenn es eine fünfte Verschachtelungsebene gibt, möchte ich bei der ersten Farbe von vorne beginnen und diese auch dann fortsetzen, wenn ich unendlich tiefe Verschachtelungsebenen habe . Ist dies nur mit CSS-Selektoren möglich und vermeide JavaScript ?

Ich bin derzeit beim folgenden Code festgefahren - wie Sie sehen können, wird Pink nach dem 4. immer wieder auf alle verschachtelten Divs angewendet.

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>
Erweitern Sie das Snippet

html css css-selectors easwee
quelle
versuchen Sie es mit : n-ten Selektoren
sumeshsn1
2
Ich denke nicht, dass dies ohne JavaScript möglich ist, aber ich würde mich sehr freuen, wenn ich mich als falsch erweisen würde.
David sagt, Monica
@ DavidThomas gleich hier :)
easwee
Ist eine Änderung des HTML-Codes möglich? Verwenden Sie einen sectionoder Klassennamen für die Top-Namen, dann sollten Ihre Selektoren enthalten seinsection > div
Collardeau
@collardeau ist leider keine Option - sonst würde ich sie mit der Klasse für bereits angewendete Farbe rendern.
Easwee

Antworten:

8

Wir können benutzen hue-rotate , um den gewünschten Effekt zu erzielen. Wenn Sie den Filter auf 90degeinstellen, werden alle 4 Kinder wiederholt. Wenn Sie die Ausgangsfarbe als Blau angeben und den Farbton um 90 Grad drehen, erhalten Sie Rot.

Ich denke nicht, dass es möglich ist, vier verschiedene Farben in der Art und Weise anzugeben, wie Sie mit reinem CSS fragen, es sei denn, Sie sind bereit, div > div > ...für ein theoretisches maximales Nest zu wiederholen ?

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>
Erweitern Sie das Snippet

Beispiel mit Lorem Ipsum Text:

Code-Snippet anzeigen

Richard Parnaby-King
quelle
Die Farben Blau und Lila scheinen sich mit jeder vollen Umdrehung zu ändern. Ansonsten ist dies eine geniale Lösung.
TylerH
Welchen Browser verwenden Sie? Ich sehe rot, grün, blau, pink wiederholt.
Richard Parnaby-King
Ich verwende Firefox 69.0.1 - die Farben wiederholen sich auch für mich, aber der Farbton von Blau und Lila ändert sich nach der ersten Iteration: i.stack.imgur.com/QZsEO.png Tatsächlich sehe ich jetzt mehr aus eng, ich glaube , sowohl die roten und grünen Farben auch bekommen leichter nach der ersten Iteration. Die Farben scheinen sich in Chrome nicht zu ändern (obwohl sich die Felder je nach Platz zu überlappen scheinen, während sie in Firefox die richtige Größe haben).
TylerH
Verursacht durch ein Gleitkomma-Problem, das mit eingeführt wurde saturate. Durch Erhöhen der Sättigung erhalten saturate(3)wir in jeder Schleife genau die gleichen Farben, aber ich habe eine Art Schatten oder Blutung bemerkt, wenn ich die Sättigung so hoch drücke, dass es SEHR schwierig ist, die Zeichen zu lesen. Ich habe die Sättigung in meinen Codebeispielen auf 2,5 erhöht, um den Unterschied zwischen den Farben pro Schleife zu verringern.
Richard Parnaby-King
Heh, das ändert die Farbe der ersten Iteration, aber es ist immer noch anders in FF - ich denke, es ist wahrscheinlich sicher zu akzeptieren, dass es nur anders aussehen wird, solange FF so damit umgeht.
TylerH
5

Hier ist eine Lösungsidee, die auf einem Hintergrundtrick basiert. Es ist eher eine Annäherung als eine robuste Lösung, da ich die Tatsache berücksichtigen werde, dass Sie auf jeder Ebene nur eine Textzeile haben.

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>
Erweitern Sie das Snippet

Temani Afif
quelle