title: tr:hover & tr:nth-child(odd ~ even) does not work together
body: <p>I wanted to highlight the table row on hover. So I've used the following CSS rule,</p>
  
  <pre><code>.my-table tbody tr:hover{
    background-color: #BFC0C2;
  }
  </code></pre>
  
  <p>It worked well alone. Later I've included the CSS rule to make the different background color for odd and even rows of the table,</p>
  
  <pre><code>.my-table tbody tr:nth-child(odd){
    background: #FFFFFF;
  }
  .my-table tbody tr:nth-child(even){
    background: #f2f2f3;
  }
  </code></pre>
  
  <p>Now the odd and even rows are having differnt background color But on hover the row is not getting highlighted. Can't I use both of them together? <a href="https://plnkr.co/edit/g6mDm8L3pN6J5OFILXfB?p=preview" rel="nofollow">Here</a> is the plunker.</p>