title: CSS select nested elements up to N levels deep
body: <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>