CSSはネストされた要素をNレベルまで深く選択します

Question

私はいくつかのネストされた要素を持っており、最初のNレベルのみを選択しようとしています。以下に、実際の例を示します。ここでは最初の7つのレベルを選択してスタイルを設定しています。それは私の望む通りに機能しますが、これらの要素を簡単に選択できる方法があることを期待していました。

実際の使用例では、ネストされた要素の総数はわかりません。最初の50レベルを選択しようとしていますので、上記の方法を使用するとかなり面倒です。残念ながら、私は自分のアプリケーションでHTMLを変更することはできないので、CSSのみの方法である必要があります。ありがとう。

.container > div, 
 
.container > div > div, 
 
.container > div > div > div, 
 
.container > div > div > div > div, 
 
.container > div > div > div > div > div, 
 
.container > div > div > div > div > div > div, 
 
.container > div > div > div > div > div > div > div { 
 
    border-left: 1px solid; 
 
    padding-left: 15px; 
 
}

<div class="container"> 
 
    <div> 
 
    A 
 
    <div> 
 
     B 
 
     <div> 
 
     C 
 
     <div> 
 
      D 
 
      <div> 
 
      E 
 
      <div> 
 
       F 
 
       <div> 
 
       G 
 
       <div> 
 
        H 
 
        <div> 
 
        I 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

これは、現在までに、すべてのCSSのバージョンでは不可能であると私の知る限りでは、指定のレベルまでのすべての要素を選択しDescendant Level Selectorがいつでもすぐに実現することが計画されていません。

.container .class { 
    border-left: 1px solid; 
    padding-left: 15px; 
} 

---

は、あなたのHTML内の任意の変更を加えることができない場合、または：すべてのあなたが選択することにしたい要素や使用するクラスを設定されているあなたが代わりに行うことができます

---

JavaScriptを使用すると、現在持っているものが最良の賭けです。