While working on CSS, I encountered an issue.
I am using a combination of :not(.class) selector and :first-child selector. Individually they work fine. The row that should be red is not turning red.
Here is the code snippet:
table tr td {
background: lightblue;
}
table tr.test td {
background: lightgreen;
}
table tr:not(.test):first-child td {
background: red;
}<table>
<tr class="test">
<td>green</td>
</tr>
<tr class="test">
<td>green</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>blue</td>
</tr>
<tr>
<td>blue</td>
</tr>
</table>I believe it should work like this: tr:not(.test) selects all <tr> elements without the test class, then :first-child selects the first of those.
I prefer not to add extra classes or modify the HTML structure.
Am I missing something here, or could it be a bug?
(I'm using Chrome 78.0.3904.87)