title: Apply/remove CSS class if parent has specific class
body: <p>Is it possible in CSS 3 to apply/remove a certain <em>css class</em> (not property/value) to an element based on it's parent class?  </p>
  
  <p>I'll give a concrete example to try and better explain my meaning -  say I have a <code>&lt;div&gt;</code> which depending on circumstances I may apply the style-class <code>my-large-div</code> or <code>my-small-div</code>. Inside it, I some inputs/buttons with the Bootstrap class <code>form-group</code> and <code>form-group-lg</code>:  </p>
  
  <pre><code>&lt;div class="my-large-div"&gt;
      ...
      &lt;div class="my-form-group form-group form-group-lg"&gt;
          &lt;!-- some input field --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, what I want to happen is that when <code>my-large-div</code> is applied, the inner div will have <code>form-group-lg</code>, but when <code>my-small-div</code> is applied, it will not. I conceptually think of a CSS like this:  </p>
  
  <pre><code>.my-large-div .my-form-group {
      add-class("form-group-lg");
  }
  
  .my-small-div .my-form-group {
      remove-class("form-group-lg");
  }
  </code></pre>
  
  <p>Now, I know this can be achieved using Javascript/jQuery, but I'm looking for a CSS-only solution, if such a solution exists, or a definitive answer that it can't be done.  </p>
  
  <p>One possible solution would be to always have two copies of <code>my-form-group</code>, with <code>display</code> set to either <code>none</code> or <code>initial</code>, but I feel this may be messy as well as inefficient (If, say, I change the class in response to user's actions in the page). </p>
  
  <p>One thing I certainly <strong>don't want</strong> to do is to replicate the entire definition of <code>form-group</code> and <code>form-group-lg</code> in my own CSS, as that would mean with every change of the Bootstrap classes I will have to change mine (plus it breaks the abstraction).</p>