title: How to use child selectors in JSS
body: <p>I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node. </p>
  
  <pre class="lang-css prettyprint-override"><code>span {
    color: red;
  }
  
  button:hover span {
    color: blue;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button&gt;
    &lt;span&gt;Click Me&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I am unsure how to write this in JSS. Something I have tried looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = {
    button: {
      '&amp;:hover': {
        span: {
          color: 'blue',
        }
      }
    },
    span: {
      color: 'red',
    }
  }
  
  const { classes } = jss.createStyleSheet(styles).attach()
  
  document.body.innerHTML = `
    &lt;button class=${classes.button}&gt;
      &lt;span class=${classes.span}&gt;Click Here&lt;/span&gt;
    &lt;/button&gt;
  `
  </code></pre>
  
  <p>Thanks!</p>