title: custom css being overridden by bootstrap css
body: <p>I am using Bootstrap 3 and I have a table showing some data. in this table I have applied some javascript for conditional formatting, in the event that a condition is met, I set the element's class to "red"</p>
  
  <pre><code>.red {
  background-color:red;
  color:white;
  }
  </code></pre>
  
  <p>the elements HTML is as follows:</p>
  
  <pre><code>&lt;td class="red"&gt;0&lt;/td&gt;
  </code></pre>
  
  <p>I now have a conflict on odd rows the text color applies but the background color is overridden by the following  css from bootstrap.</p>
  
  <pre><code>.table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; td,
  .table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; th {
    background-color: #f9f9f9;
  }
  </code></pre>
  
  <p>how can I resolve this conflict and assure that the red class takes presedence?</p>