title: css - Select every element depending on the parity of amount of parents ( CSS or Less but no JS )
body: <p>[ I know I probably didn't explain the problem in the title well enough. ]</p>
  <p>So, I'm working on a style-sheet where there are two custom elements ( <code>&lt;grid&gt;</code> and <code>&lt;box&gt;</code>) that are flexboxes, and alternate in <code>flex-direction</code>, so like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;box&gt;             &lt;!-- flex-direction: column --&gt;
    &lt;grid&gt;           &lt;!-- flex-direction: row --&gt;
      &lt;box&gt;&lt;/box&gt;     &lt;!-- flex-direction: column --&gt;
      &lt;box&gt;&lt;/box&gt;     &lt;!-- flex-direction: column --&gt;
    &lt;/grid&gt;
    &lt;box&gt;            &lt;!-- flex-direction: row --&gt;
      &lt;grid&gt;&lt;/grid&gt;   &lt;!-- flex-direction: column --&gt;
    &lt;/box&gt;
  &lt;/box&gt;
  </code></pre>
  <p>In less, my best solution was:</p>
  <pre><code>grid, box { display: flex }
  body {
   &gt; grid, &gt; box {
     flex-direction: column;
   &gt; grid, &gt; box {
     flex-direction: row;
   &gt; grid, &gt; box {
     flex-direction: column;
     // Etc...
   }}}
  }
  </code></pre>
  <p>And this is pretty bad, is there something like the code below in css?</p>
  <pre><code>grid, box { display: flex }
  body &gt; grid:parents(even), body &gt; box:parents(even) { flex-direction: column }
  body &gt; grid:parents( odd), body &gt; box:parents( odd) { flex-direction: row }
  </code></pre>
  <p>EDIT: body &gt; nth-child() doesn't work.</p>
  <p>Code:</p>
  <pre class="lang-css prettyprint-override"><code>body &gt; grid:nth-child(even),
  body &gt; box:nth-child(even) {
    flex-direction: column;
  }
  
  body &gt; grid:nth-child(odd),
  body &gt; box:nth-child(odd) {
    flex-direction: row;
  </code></pre>
  <ol>
  <li><p><code>body &gt; element:nth-child(odd)</code> only selects the first immediate child of body, it should be <code>body element:nth-child(odd)</code>.</p>
  </li>
  <li><p>My HTML example at the start of the question looks like this using the code above when modified to fix problem number 1.</p>
  </li>
  </ol>
  <pre class="lang-html prettyprint-override"><code>&lt;box&gt;             &lt;!-- flex-direction: column --&gt;
    &lt;grid&gt;           &lt;!-- flex-direction: row --&gt;
      &lt;box&gt;&lt;/box&gt;     &lt;!-- flex-direction: column --&gt;
      &lt;box&gt;&lt;/box&gt;     &lt;!-- flex-direction: row --&gt;
    &lt;/grid&gt;
    &lt;box&gt;            &lt;!-- flex-direction: column --&gt;
      &lt;grid&gt;&lt;/grid&gt;   &lt;!-- flex-direction: row --&gt;
    &lt;/box&gt;
  &lt;/box&gt;
  </code></pre>
  <p>Which isn't the same thing.</p>