title: How can I use :hover with multiple classes
body: <p>I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.</p>
  
  <p>How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.</p>
  
  <p>Here's a fiddle I prepared to demonstrate:
  <a href="http://jsfiddle.net/7n4Wy/" rel="noreferrer">http://jsfiddle.net/7n4Wy/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;p class="red button"&gt;Test&lt;/p&gt;
  &lt;p class="blue button"&gt;Test&lt;/p&gt;
  &lt;p class="red"&gt; Not a button &lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.red {
      background: red;
  }
  
  .blue {
      background: blue;    
  }
  
  .button {
      border-radius: 6px;
  }
  
  .button:hover .red:hover {
      background: pink;
  }
  </code></pre>