title: :hover selector works but :focus does not
body: <p>I am using Angular 4 and I have a selected for a <code>mat-card</code> of <code>:hover</code> which seems fine. I have added a <code>click event</code> to the <code>mat-card</code> and when clicked I want the background to stay the same color as the hover until another item has been clicked.</p>
  
  <pre><code>  &lt;mat-card&gt;
      &lt;div fxLayout="row" fxLayout.xs="column"&gt;
        &lt;div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;Version Number:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;{{version.versionNumber}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div fxLayout="row" fxLayout.xs="column"&gt;
        &lt;div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;User:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;{{version.user}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div fxLayout="row" fxLayout.xs="column"&gt;
        &lt;div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;Created Date:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;{{version.createdDate | date: 'dd/MM/yyyy'}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div fxLayout="row" fxLayout.xs="column"&gt;
        &lt;div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;Start Date:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100"&gt;
          &lt;span&gt;{{version.startDate | date: 'dd/MM/yyyy'}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/mat-card&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>mat-card:hover {
      background-color: rgba(42, 63, 84, .2);
  }
  
  mat-card:focus {
      background: blue;
  }
  </code></pre>
  
  <p>Like i said the hover works fine but the :focus does not.</p>