I am facing an issue with my table where I have applied an external CSS that uses alternating shaded rows. My aim is to have specific table cells with different background and font colors - one cell with a green background and red font, and another with a red background and green writing. However, only the style for the first ID seems to be taking effect. If I set the red background first, it shows up but not the green font. On the other hand, if I define the green background first, it displays but the red font doesn't show.
tr:nth-child(odd) {background: #FFF}
tr:nth-child(even) {background: #CCC}
table,th,td
{
border:1px solid black; text-align:center;
}
#worst {font-style:bold; background-color: red; color:green };
#best {font-style:bold; background-color: green; color:red };
html
<tr>
<td>Hummer</td>
<td>290</td>
<td>115</td>
<td ID="worst">405</td>
</tr>
<tr>
<td>Bike</td>
<td>0</td>
<td>5</td>
<td ID="best">5</td>
</tr>
Is this behavior caused by the nature of external CSS files or could there be another underlying issue?