title: Apply CSS styles to an element depending on its child elements
body: <p>Is it possible to define a CSS style for an element, that is only applied if the matching element contains a specific element (as the direct child item)?</p>
  
  <p>I think this is best explained using an example.</p>
  
  <p><strong>Note</strong>: I'm trying to <strong>style the parent element</strong>, depending on what child elements it contains.</p>
  
  <pre><code>&lt;style&gt;
    /* note this is invalid syntax. I'm using the non-existing
     ":containing" pseudo-class to show what I want to achieve. */
    div:containing div.a { border: solid 3px red; }
    div:containing div.b { border: solid 3px blue; }
  &lt;/style&gt;
  
  &lt;!-- the following div should have a red border because
       if contains a div with class="a" --&gt;
  &lt;div&gt;
    &lt;div class="a"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- the following div should have a blue border --&gt;
  &lt;div&gt;
    &lt;div class="b"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Note 2</strong>: I know I can achieve this using javascript, but I just wondered whether this is possible using some unknown (to me) CSS features.</p>