title: Optional child selector, with CSS/Stylus/LESS: .aa > .bb? > .cc
body: <p>Consider this HTML with CSS classes <em>aa</em>, <em>bb</em> and <em>cc</em>:</p>
  
  <pre><code>&lt;div class='aa'&gt;
  &lt;div class='bb'&gt;
  &lt;div class='cc'&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can select the <code>class=cc</code> tag like so: <code>.aa &gt; .bb &gt; .cc</code>. However, in my case, sometimes the <code>.bb</code> tag is absent, that is, the HTML looks like so:</p>
  
  <pre><code>&lt;div class='aa'&gt;
  &lt;div class='cc'&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thererfore, to select all <code>.cc</code> close to an <code>.aa</code>, I'd need to specify two CSS paths:</p>
  
  <pre><code>.aa &gt; .bb &gt; .cc,
  .aa &gt; .cc { .... }
  </code></pre>
  
  <p>This works, but, is there no shorter way? Something similar to this:</p>
  
  <pre><code>.aa &gt; (.bb &gt;)? .cc { ... }   /* ? means "optional" */
  </code></pre>
  
  <p>with CSS or something like Stylus or LESS?</p>
  
  <p>Motivation: In the real world, "aa" and "bb" and "cc" are somewhat longer names, and there's more stuff before and after the "aa" and "cc", and it'd be nice to not need to duplicate that stuff.</p>
  
  <p>Please note: In my case, this won't work: <code>.aa .cc</code> because that'd match too many <code>.cc</code>s elsewhere on the page. The <code>.cc</code>s need to be either immediately below the <code>.aa</code>, or below <code>.aa &gt; .bb</code>.</p>