brld brld - 4 months ago 17
CSS Question

Style only certain th in a table?

I'd like to be able to style only certain table headers in a HTML table. There are 8 table headers in total, and I want to select 4 of them.

I am not allowed to change any HTML, or add any JavaScript. Only CSS. The JSFiddle for the question is here:

table tr td {
padding: 5px;
table {
border: pink 5px;
border-style: double;
table tr:nth-child(even) {
background-color: #aaa;

<td>Maple syrup season!</td>
<td>Cooling down</td>
<td>Rain, but not for long</td>
<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>
<th>Recommended Outerwear</th>
<td>Heavy jacket</td>
<td>It depends!</td>
<td>Usually no jacket</td>
<td>Light jacket sometimes</td>

I'm thinking something along the lines of:

table tr th+td:not(th+th) {
color: green;

or maybe:

table tr th+td {
color: green;

However neither of those seem to work.

I want to style “Temperature”, “Precipitation”, “Amount of Daylight” and “Recommended Outerwear” and not month headings. Also, I cannot use an nth-child or nth-of-type selector for this.

EDIT: Answer selected, thank you!


Based on jsfiddle you supplied, this is the selector that works:

table tr + tr > th {
  background-color: red;
  color: #FFF;

Explanation: It will not select the first tr and select the tr that next to a tr, and it will select th the direct child of the tr.

No nth-child or nth-of-type is used. Hope this helps.