title: Pure CSS conditional styling - is there such a thing?
body: <p>Is it possible, without SASS, LESS, Javascript - just pure CSS to do something similiar to:</p>
  
  <pre><code>.B
  {
      display: none;
  }
  
  .A:empty
  {
       display: none;
  
       .B
       {
           display: block;
       }
  }
  </code></pre>
  
  <p>So that when class 'A' is empty do something else with container 'B'?
  Or that when class 'A' is having some state - do something else with container B?</p>
  
  <p>Examples:</p>
  
  <pre><code>Hover A -&gt; Hide B
  Hide B -&gt; Show C
  C Empty -&gt; Show D
  </code></pre>
  
  <p>I've tried finding the correct terms for these states but haven't found anything yet - if there is any? </p>
  
  <p><strong>Non dependant:</strong></p>
  
  <p>I don't want the classes to be dependant upon eachother. </p>
  
  <pre><code>&lt;div class="A"&gt;&lt;div class="B"&gt;&lt;/div&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>...is not a solution. </p>
  
  <pre><code>&lt;div class="A"&gt;&lt;/div&gt;
  &lt;div class="B"&gt;Show me when condition in A is reached&lt;div&gt;
  </code></pre>
  
  <p>Since then I can just do whatever I wanted fine. I want class A to be on some part of the page and class B inside some other container somewhere else - non relative to class A.</p>