title: How to simultaneously transition colour of nested children
body: <p>I am struggling to find the CSS that does 2 things, change the colour of all child elements, and do it as a transition. I've created a simple test case of the following <a href="https://jsfiddle.net/gr7gvz2f/" rel="nofollow">JSFiddle</a>:</p>
  
  <pre><code>&lt;div class="parent"&gt;Level 1
    &lt;div&gt;Level 2
      &lt;div class="child"&gt;Level 3 (!important means this should become red on hover)
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to come up with the CSS to transition the text to a different colour. Here's the skeleton of what I'm working with:</p>
  
  <pre><code>.parent {
    transition: all 2s ease-out;
  }
  .parent:hover {
    color: red !important;
  }
  .child {
    color: blue;
  }
  </code></pre>
  
  <p>I want to specify a rule at the parent level that will cause all children to change colour. I know using <code>!important</code> is discouraged, but this seems like a valid case for using it, as this rule is flagging the section as 'in error' and should override other rules.</p>
  
  <p>Here is what I've done to make it work, but it requires that I have rules for all child elements that set the colour. Which is fine in this simple example, but in the real system poses a problem because we may not know all the rules that change the colour. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    font-size: 3rem;
    text-indent: 1rem;
  }
  .child {
    color: blue;
  }
  
  .parent,
  .parent .child {
      transition: all 3s;
  }
  
  .parent:hover,
  .parent:hover .child {
    color: red !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    Level 1
    &lt;div&gt;
      Level 2
      &lt;div class="child"&gt;
        Level 3 (!important means this should become red on hover)
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible to transition all the children to a new colour without knowing all classes that must be specified? I tried using a <code>.parent *</code> selector, but each level of nesting increases the transition period as in this <a href="https://jsfiddle.net/savaoxmj/3" rel="nofollow">fiddle</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>I have a better understanding of what's going on. @Hunter resolved the unnecessary <code>!important</code> rule. So, the real issue is that the transition-duration property seems to be additive for children, see how slow it takes to remove the red colour when no longer hovering over the text, ideally the colour of each nested element should transition at the same time.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    padding-left: 1rem;
  }
  
  .a-child { color: blue; }
  
  .parent * {
    transition: color 2s;
  }
  
  .parent:hover * {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div&gt;
      Level 1
      &lt;div&gt;
        Level 2
        &lt;div&gt;
          Level 3
          &lt;div&gt;
            Level 4
            &lt;div class="a-child"&gt;
            Level 5
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>