title: Change color of certain row with the selection module
body: <p>When a property has a certain value, I'd like to color that row. This question has been asked before and has a working solution here:
  <a href="https://stackoverflow.com/questions/26362666/how-to-color-row-on-specific-value-in-angular-ui-grid">How to color row on specific value in angular-ui-grid?</a></p>
  
  <p>I'm setting the front color (with color: #FF0000), not the background color.</p>
  
  <p>This works fine until you add the selection module. With this module, you have an extra checkbox at the beginning of this row. When you check this, the background color of the row changes (not the front color!). All this does it add an extra class, which is declared in the grid's css:</p>
  
  <pre><code>.ui-grid-row.ui-grid-row-selected &gt; [ui-grid-row] &gt; .ui-grid-cell {
    background-color: #c9dde1;
  }
  </code></pre>
  
  <p>When the checkbox is checked, this class is added to the element.</p>
  
  <p>The code I have is similar to the code in the linked answer:</p>
  
  <pre><code>rowTemplate: '&lt;div ng-class="{\'targetRow\': row.entity.target }"&gt;&lt;div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell&gt;&lt;/div&gt;&lt;/div&gt;',
  
  .targetRow {
      color: #FF0000;
  }
  </code></pre>
  
  <p>After adding this, the background color doesn't change anymore when a row is selected. In debugging tools of Chrome, I can see the class is still being correctly added and there are no other differences, still <code>color</code> is somehow overriding <code>background-color</code></p>
  
  <p>Why does this happen and how can I fix this?</p>
  
  <p>Here's a Plunker:
  <a href="http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview</a></p>
  
  <p>Remove the rowTemplate to see the difference.</p>