CODEWITHSUNDEEP
csshtml-table
mschadegg
mschadegg

Reputation: 799

CSS - .firstclass td .secondclass does not work

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

Answers (1)

Marc Audet
Marc Audet

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

Related Questions