title: How use :hover in :last-child in material-ui?
body: <p>I'm using React with material-ui and have a menu component with a list, the last item in this menu is different from the others, I using :last-child and it is functional, the problem is when I try using :hover in that last element.</p>
  
  <p>Style:</p>
  <pre class="lang-js prettyprint-override"><code>const useStyles = makeStyles((theme) =&gt; ({
  menu: {
    textDecoration: 'none',
    color: theme.palette.navy.default,
    cursor: 'pointer',
    fontWeight: 'bold',
    textTransform: 'uppercase',
    '&amp;:last-child': {
      background: theme.palette.orange.default,
      borderRadius: '5em',
      color: theme.palette.white.default,
      // using hover in the last child item not work
      '&amp;:hover': {
        background: theme.palette.green.default,
      },
    },
   },
  }));
  </code></pre>
  <p>Component:</p>
  <pre class="lang-js prettyprint-override"><code>...
  const classes = useStyles();
  
  &lt;MenuList&gt;
      {menu.map((item, index) =&gt; (
          &lt;MenuItem selected={false} key={index} className={classes.menu}&gt;
              {item.title}
          &lt;/MenuItem&gt;
      ))}
  &lt;/MenuList&gt;
  </code></pre>
  <p>Do you know how to solve it?</p>