CSS select nested elements up to N levels deep
<p>I have a number of nested elements, and I'm trying to select only the first N levels. The below shows a working example, where I'm selecting the first 7 levels and styling them. That works exactly how I want, however, I was hoping there was a simplified way of selecting these elements.</p>

<p>In my actual use case, I don't know the total number of nested elements, and I'm trying to select the first 50 levels, so using the above method would be quite messy. Unfortunately, I can't change the HTML in my application, so it needs to be a CSS only method. Thanks.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container &gt; div,
.container &gt; div &gt; div,
.container &gt; div &gt; div &gt; div,
.container &gt; div &gt; div &gt; div &gt; div,
.container &gt; div &gt; div &gt; div &gt; div &gt; div,
.container &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div,
.container &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div {
  border-left: 1px solid;
  padding-left: 15px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div&gt;
    A
    &lt;div&gt;
      B
      &lt;div&gt;
        C
        &lt;div&gt;
          D
          &lt;div&gt;
            E
            &lt;div&gt;
              F
              &lt;div&gt;
                G
                &lt;div&gt;
                  H
                  &lt;div&gt;
                    I
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>