title: Applying nth-child pseudo selector to a specific row class
body: <p>I've got a bit of an issue that I'm unsure if it's a browser thing or a CSS3 thing.</p>
  
  <p>I have a datagrid using a standard HTML table:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          ...
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="found"&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="found"&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="found"&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have a jQuery function that is searching the contents of the TD elements. If it's found, it maintains the found class. If it's not found, then it removes the found class and and adds a not-found class. Naturally, not-found just sets display: none</p>
  
  <p>So the search function is working the way I'd like. Classes are being assigned appropriately. However, I'm using CSS pseudo selectors to apply styling to alternate rows. </p>
  
  <pre><code>tr.found:nth-child(even) {
      background: #fff;
  }
  tr.found:nth-child(odd) {
      background: #000;
  }
  </code></pre>
  
  <p>This works out great before a search takes place. However, after a search and the not-found class is applied, the pseudo selector seems to apply only to the element rather than the element and the class. Either that, or the pseudo selectors are applied during page load and are left static at that point.</p>
  
  <p>I could go through in my jQuery search and reassign specific even and odd classes, but that gets messy. It wouldn't be that big of a deal, but my column headers are sortable, so I'd have to reapply classes on that event as well creating kind of an inefficient method to do what I'm doing. If data samples get too large, you would likely be able to see the class changes iteratively, something I'm attempting to avoid.</p>
  
  <p>Any solutions to this?</p>
  
  <p>EDIT</p>
  
  <p>As requested, I setup a JSFiddle so you geniuses can toy with it: <a href="http://jsfiddle.net/bDePR/" rel="nofollow">http://jsfiddle.net/bDePR/</a></p>
  
  <p>Searching for President or Secretary will yield the behavior.</p>