Can I combine pseudo-classes in CSS like this?

Question

HTML:

<table>
<tr class="not-counted"><th>Heading 1</th></tr>
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr class="not-counted"><th>Heading 2</th></tr>
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS style:

table tr:not(.not-counted):nth-child(even) td {
    background-color: gray;
}​

Demo: http://jsfiddle.net/MartyIX/fdtpL/

I hoped that TR containing key3 would have grey background too but it does not work. How to write the CSS properly?

Thanks!

Answer 1

I solved the problem with the help of dummy lines:

HTML

<table>
<tr><th>Heading 1</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr><th>Heading 2</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS

table tr:nth-child(even) td {
    background-color: gray;
}​

Demo

http://jsfiddle.net/MartyIX/fdtpL/3/

I'm not really proud of it but I've lost too much time with that.