CSSを使用してネストされたdivで一連の色を繰り返す

8

4つの色のセットがあり、それらをネストされたdivに適用したいので、次の子はそれぞれ異なる色になります。ネストの5番目のレベルがある場合は、最初の色からやり直し、ネストのレベルが無限に深くても、これを継続したいと考えています。これはCSSセレクターのみで実行でき、JavaScriptを回避できますか？

私は現在、次のコードで行き詰まっています-ご覧のとおり、ピンクが4番目以降すべてのネストされたdivに適用され続けます。

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>
スニペットを展開

html  css  css-selectors 
— イージー
ソース
：
— nth
2
JavaScriptなしではこれは不可能だと思いますが、私は間違っていることが証明されてとても嬉しいです。
— デビッドはモニカを復活させると
@DavidThomasここでも同じ:)
— easwee
HTMLを変更する可能性はありますか？section上位のものには、またはクラス名を使用し、セレクターを含める必要がありますsection > div
— Colldeau
@collardeau残念ながらそれはオプションではありません-そうでなければ、すでに適用されている色のクラスでそれらをレンダリングします。
— easwee

回答:

8

hue-rotate希望する効果を出すために使用できます。フィルターを設定すると、90deg4人の子供ごとに繰り返されます。開始色を青に指定し、色相を90度回転させると、赤になります。

div > div > ...理論的な最大のネストを繰り返すつもりがない限り、純粋なcssを使用して求める方法で4つの異なる色を指定することは不可能だと思いますか？

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>
スニペットを展開

lorem ipsumテキストの例：

コードスニペットを表示

— リチャードパーナビーキング
ソース
青と紫の色は、1回転ごとに変化するようです。それ以外の場合、これは独創的な解決策です。
— TylerH
どのブラウザを使用していますか？赤、緑、青、ピンクが繰り返されるのを見ています。
— Richard Parnaby-King
私は、Firefox 69.0.1を使用しています-色は同様に私のために繰り返しますが、最初の反復の後に青と紫の変化の陰： i.stack.imgur.com/QZsEO.pngでの事実は、今私が見ていることがより密接に、私は赤と緑の両方の色も最初の反復後に明るくなると思います。Chromeでは色が変化していないようです（ボックスはスペースによって重複しているようですが、Firefoxでは適切にサイズ調整されています）。
— TylerH
で発生した浮動小数点の問題が原因saturateです。彩度を上げると、saturate(3)ループごとにまったく同じ色が得られますが、彩度をそれほど高くすると、ある種の影やにじみに気づき、文字が非常に読みにくくなっています。ループごとの色の違いを減らすために、コード例の彩度を2.5に増やしました。
— Richard Parnaby-King
最初のイテレーションの色は変わりますが、FFではまだ違います-FFがこのように処理する限り、見た目が異なるだけであることを受け入れるのはおそらく安全だと思います。
— TylerH
5

これは、いくつかのバックグラウンドトリックに依存するソリューションのアイデアです。それはより多くのです近似私はあなたが各レベルのテキストの一行のみを持っているという事実を検討するため、堅牢なソリューションよりも。

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>
スニペットを展開

— テマニ・アフィフ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.