Reputation: 799
I have a problem with styling my table with class selectors.
I want two different colors, one for the th
element with the class="pause" and another color on the td
element with the same class name.
Why does this CSS not work:
.timetable th .pause {
background-color:#F99;
}
.timetable td .pause {
background-color:#FEE;
}
on this HTML?
<table class="timetable">
<thead>
<tr>
<th>Tispunkt</th>
<th style='height:30px;'>08:00</th>
<th style='height:30px;'>08:30</th>
<th style='height:30px;'>09:00</th>
<th style='height:15px;'>09:30</th>
<th style='height:15px;' class='pause'>09:45</th>
<th style='height:30px;'>10:00</th>
<th style='height:30px;'>10:30</th>
<th style='height:30px;'>11:00</th>
<th style='height:30px;'>11:30</th>
<th style='height:30px;'>12:00</th>
<th style='height:30px;' class='pause'>12:30</th>
<th style='height:30px;'>13:00</th>
<th style='height:30px;'>13:30</th>
<th style='height:30px;'>14:00</th>
<th style='height:30px;'>14:30</th>
<th style='height:30px;'>15:00</th>
<th style='height:30px;'>15:30</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maskine 4</td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:15px;'></td>
<td style='height:15px;' class='pause'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;' class='pause'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
<td style='height:30px;'></td>
</tr>
</tbody>
This CSS works
.timetable .pause {
background-color:#F99;
}
But I want to different colors on th
elements and td
elements
Upvotes: 2
Views: 886
Reputation: 46825
You need the following:
.timetable th.pause {
background-color:#F99;
}
.timetable td.pause {
background-color:#FEE;
}
No space between the tag and the class name.
Upvotes: 2