title: Custom Contextual Table Row Class Bootstrap
body: <p>I am trying to create some custom classes for contextual TR colorisation using Bootstrap.</p>
  
  <p>Reading the documentation it says to find the copy the class property to a custom.css file and modify it suit your needs. However after trying this without success I thought I would add my custom class into bootstrap.css. Still this resulted in no success.</p>
  
  <p>I have been looking to try and diagnose the problem using Firebug but haven't been able to find a solution, hence the post here.</p>
  
  <p>When I use the class element 'success' the CSS looks like this</p>
  
  <pre><code>.table-bordered thead:last-child tr:last-child &gt; th:first-child, .table-bordered tbody:last-child tr:last-child &gt; td:first-child, .table-bordered tbody:last-child tr:last-child &gt; th:first-child, .table-bordered tfoot:last-child tr:last-child &gt; td:first-child, .table-bordered tfoot:last-child tr:last-child &gt; th:first-child {
      border-bottom-left-radius: 4px;
  }
  .table tbody tr.success &gt; td {
      background-color: #DFF0D8;
  }
  .table-striped tbody &gt; tr:nth-child(2n+1) &gt; td, .table-striped tbody &gt; tr:nth-child(2n+1) &gt; th {
      background-color: #F9F9F9;
  }
  </code></pre>
  
  <p>when I use my custom class (which I can see is selected in Firebug) I get this.</p>
  
  <pre><code>.table-striped tbody &gt; tr:nth-child(2n+1) &gt; td, .table-striped tbody &gt; tr:nth-child(2n+1) &gt; th {
      background-color: #F9F9F9;
  }
  </code></pre>
  
  <p>So its not even reading the custom class from the CSS file and I have no idea why.</p>
  
  <p>Any thoughts?</p>
  
  <p>S</p>
  
  <p><em><strong></em></strong> EDIT <strong>**</strong></p>
  
  <p>The custom CSS file looks like this.</p>
  
  <pre><code>.width100{
      width: 100%;    
  }
  
  /*Custom Table Row Property*/
  .table-striped&gt; tbody tr.major &gt; td {
    background-color: #faa732;
  }
  
  .table tbody tr.initial &gt; td {
    background-color: #49afcd;
  }
  
  .table tbody tr.maint &gt; td {
    background-color: #5b331d;
  } 
  
  .table tbody tr.suppressed &gt; td {
    background-color: #bfcada;
  }
  </code></pre>