Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers.
To see the code and example for this question, visit: https://jsfiddle.net/gk0bwtvs/38/
table tr td {
padding: 5px;
}
table {
border: pink 5px;
border-style: double;
}
table tr:nth-child(even) {
background-color: #aaa;
}<table>
<tr>
<td> </td>
<th>January</th>
<th>March</th>
<th>June</th>
<th>September</th>
</tr>
<tr>
<th>Temperature</th>
<td>Cold</td>
<td>Maple syrup season!</td>
<td>Warmer</td>
<td>Cooling down</td>
</tr>
<tr>
<th>Precipitation</th>
<td>Snow</td>
<td>Mud</td>
<td>Rain</td>
<td>Rain, but not for long</td>
</tr>
<tr>
<th>Amount of Daylight</th>
<td>Very little</td>
<td>Even daylight and night</td>
<td>Lots of daylight</td>
<td>Even daylight and night</td>
</tr>
<tr>
<th>Recommended Outerwear</th>
<td>Heavy jacket</td>
<td>It depends!</td>
<td>Usually no jacket</td>
<td>Light jacket sometimes</td>
</tr>
</table>I'm considering using:
table tr th+td:not(th+th) {
color: green;
}
or perhaps:
table tr th+td {
color: green;
}
However, neither of these approaches seem to be effective.
The goal is to style the headers "Temperature," "Precipitation," "Amount of Daylight," and "Recommended Outerwear" while excluding the month headers. It's also important to avoid using nth-child or nth-of-type selectors for this task.
UPDATE: Answer has been selected, thank you!