Styling a single table cell

Question

I have a problem with styling a single table cell. Here is an example code illustrating my problem:

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
    <tr class="row1">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
        <tr class="row2">
        <td>sup</td>
        <td>sup</td>
        <td class="op">sup</td>
        <td>sup</td>
    </tr>
    <tr class="fotm">
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
    </tr>
</table>

As you can see the table has two main colours (row1 and row2) that change each row (checkboard style). The table also has a "flavour of the month" row with an additional third color. Lastly the table has a single td class="op" that will be a fourth color.

The problem I'm having is that row1, row2 and the fotm class overrides the "op" class color and the fourth color is not shown. Can I write this any differently to make it work?

I've tried:

#bltable tr.row1 

(without "td" in the end) but then I get no row color at all, seeing as "X is not inherited. It is applied to an enclosing tag"

Furthermore, Im not sure wether its necessary to have the extra "td" at the end of

#bltable td.op td {}

given that td.op should take care of that part.. In principle shouldn't only

.op {}

be enough?

Any ideas?

Answer 1

You have to use this :

bltable td.op {background-color:#f2f2c3;}

You right, the extra "td" isn't necessary.

Answer 2

#bltable td.op td would select any TDs below td.op, so that's not the selector you're looking for.

Basically, you're running into a specificity problem: your row1 and row2 selectors have one more HTML element in their selectors, so they are more specific and "winning" when compared to your td.op selector; you will need to make your td.op selector as specific (or more specific) than the others so it will be applied:

#bltable tr.row1 td {background-color:#eff3f7;}
#bltable tr.row2 td {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable tr td.op {background-color:#f2f2c3;}

Above, you have an ID, an element with a class, and an element for each selector. That should do it for you.

Answer 3

You need to change this line in your css

#bltable td.op td {background-color:#f2f2c3;}

to this

#bltable tr td.op {background-color:#f2f2c3;}

You had two tds and the .op on the first.

Example: http://jsfiddle.net/jasongennaro/LdSM3/

Answer 4

Your <td class="op"> needs to be styled with #bltable td.op {background-color:#f2f2c3;} not #bltable td.op td {background-color:#f2f2c3;}

http://jsfiddle.net/AlienWebguy/QvdsQ/

Answer 5

Your rule is wrong. It should be:

#bltable td.op {background-color:#f2f2c3;}

or

#bltable tr td.op {background-color:#f2f2c3;}

Answer 6

Change your class tag to an id tag, then use some javascript underneath it to color it in:

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
<tr class="row1">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
    <tr class="row2">
    <td>sup</td>
    <td>sup</td>
    <td id="op">sup</td>
    <td>sup</td>
</tr>
<tr class="fotm">
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
</tr>
</table>

<script>
     document.getElementById("op").style.background = "#f2f2c3";
</script>