Repetir un conjunto de colores en divs anidados con CSS

8

Tengo un conjunto de cuatro colores y quiero aplicarlos a los div anidados, por lo que cada próximo hijo tiene un color diferente. Si hay un quinto nivel de anidamiento, quiero comenzar de nuevo con el primer color y tenerlo en curso, incluso si tengo niveles infinitos de anidamiento . ¿Es posible hacerlo solo con selectores CSS y evitar JavaScript ?

Actualmente estoy atascado en el siguiente código, como puede ver, el rosa se sigue aplicando a todos los div anidados después del 4to.

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>
Expandir fragmento

html css css-selectors easwee
fuente
probar con : nth- selectores
sumeshsn1
2
No creo que esto sea posible sin JavaScript, pero estaría muy feliz de que me demuestren lo contrario.
David dice que reinstale a Monica el
@DavidThomas igual aquí :)
easwee
¿Es posible cambiar el HTML? Utilice una sectiono nombre de clase para los superiores a continuación, sus selectores deben estar contenidassection > div
collardeau
@collardeau desafortunadamente no es una opción; de lo contrario, los estaría representando con la clase de color ya aplicada.
easwee

Respuestas:

8

Podemos usar hue-rotatepara dar el efecto deseado. Al configurar el filtro 90deg, se repetirá cada 4 niños. Al especificar el color inicial como azul y girando el tono 90 grados, obtenemos rojo.

¿No creo que sea posible especificar cuatro colores diferentes en la forma en que pregunta utilizando CSS puro a menos que esté dispuesto a repetir div > div > ...para un nido máximo teórico?

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>
Expandir fragmento

Ejemplo con texto lorem ipsum:

Mostrar fragmento de código

Richard Parnaby-King
fuente
Los colores azul y morado parecen cambiar con cada rotación completa. De lo contrario, esta es una solución ingeniosa.
TylerH
¿Qué navegador estás usando? Estoy viendo rojo, verde, azul, rosa repetido.
Richard Parnaby-King
Estoy usando Firefox 69.0.1: los colores también se repiten para mí, pero el tono del azul y el púrpura cambia después de la primera iteración: i.stack.imgur.com/QZsEO.png De hecho, ahora que veo más de cerca, creo que los colores rojo y verde también se vuelven más claros después de la primera iteración. Los colores no parecen cambiar en Chrome (aunque las cajas parecen superponerse dependiendo del espacio, allí, mientras que se dimensionan correctamente en Firefox).
TylerH
Causado por un problema de punto flotante introducido con saturate. Al aumentar la saturación para saturate(3)obtener exactamente los mismos colores en cada bucle, pero he notado una especie de sombra o sangrado cuando presiono la saturación tan alto que hace que sea MUY difícil leer los caracteres. Aumenté la saturación en mis ejemplos de código a 2.5 para reducir la diferencia entre colores por bucle.
Richard Parnaby-King
Je, eso cambia el color de la primera iteración, pero sigue siendo diferente en FF: creo que probablemente sea seguro aceptar que solo se verá diferente siempre que FF lo maneje de esta manera.
TylerH
5

Aquí hay una idea de solución basada en algún truco de fondo. Es más una aproximación que una solución sólida, ya que consideraré el hecho de que solo tendrá una línea de texto en cada nivel.

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>
Expandir fragmento

Temani Afif
fuente