title: Why this CSS not valid?
body: <p><strong>I have this CSS:</strong></p>
  
  <pre><code>.optionQuiz a:hover{
          .Qtick{
              background-color: green;
          }
      }
  </code></pre>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div class="optionQuiz"&gt;
  &lt;a href="#"&gt;
  &lt;span class="Qtick"&gt;1&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My GOAL:</strong>
  My Goal is when the user hovers the mouse over the <code>&lt;a&gt;</code> the span with class within the <code>'&lt;a&gt;'</code> to be highlighted.</p>
  
  <p><strong>MY Question:</strong>
  Why this CSS didn't work? This is indeed good way but seems such thing have not been invented? Why? Should I use JavaScript? I don't want. I want it in CSS way.</p>
  
  <p>Any kind of help is appreciated. </p>