title: Bootstrap CSS nested style class not applying
body: <p>Need some help with CSS styling CSS experts!
  Using bootstrap in which 
  they have the following defined in bootstrap.css:</p>
  
  <pre><code>.table &gt; tbody &gt; tr.active &gt; td{ 
     background-color:#f5f5f5;}
  </code></pre>
  
  <p>I'm trying to highlight a row in a table when a user clicks it- easy enough,</p>
  
  <p>my html structure follows exactly and I have the active class being inserted to the html when I click the row but it is just not highlighting and the style does not get applied...</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div ng-class="....."&gt;
  &lt;div id="firstTable" class="group-table-split-body"&gt;
  &lt;table class="table-bordered table-condensed table-hover col-md-12"&gt;
    &lt;thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="item in items"
          ng-mouseenter="..."
          ng-mouseleave="..."
          ng-click="onRowClick(item)"&gt;
         &lt;td class="col-md-12"&gt;{{item.name}}.....
         &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
     .......................
  </code></pre>
  
  <p>however, if I try it with just a random test style class it works, like:</p>
  
  <pre><code>.anything
   {background-color:#f5f5f5;}
  </code></pre>
  
  <p>so if I try .anything, it highlights....</p>
  
  <p>I'm using Firefox...any ideas??</p>