title: When hovering over a child element in firefox
body: <p>When hovering over a child element in firefox using this rule <code>.parent:hover &gt; .child { /*style*/ }</code>, the child element is treated as not part of the parent element and therefore not styled. like in the snippet below, in firefox if you hover over the button, the child element is affected but when the div is hovered it will not changed.</p>
  
  <p>But in chrome hovering over the parent and child will affect the child.
  I find this useful to what am working on right now, so is there a way I can achieve the same effect in firefox?</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>button {
    position: relative;
  }
  button:hover &gt; div {
    background-color: #67BDFF;
  }
  button:hover &gt; div:before {
    content: "SMURF!";
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    top: 10px;
  }
  button &gt; div {
    position: absolute;
    top: 18px;
    left: 0;
    padding: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;
    hover over me and my child will turn smurf
    &lt;div&gt;
      i'll remain smurf if you over over me cus am part of my parent, but not in firefox
    &lt;/div&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>