Table rules hierarchy

I have a table within a table

<table class="c1">...<table class="c2"><tr><td>Something</td>...</table></table>

Code (markup):

The CSS code associated is something like (to make it simple)

.c1 td { color:#aaa }
.c2 td { color:#bbb }

Code (markup):

And Something is color #aaa, not #bbb. Firefox (firebug) shows that the ".c1 td" rule takes precedence over ".c2 td", while the c2 table (class c2) is embedded into c1...

By adding 'table' to the rule, like "table.c2 td { color:#bbb }" it works as I was expecting it to do, color is #bbb.
Is it a Firefox bug or the right CSS behavior?

Using Firefox 3.0.1

Thanks

 

I'd have to see the whole of the page's code for other factors, but both selectors have the same weight, so the last one in the stylesheet should apply. A cell in the inner table is descended equally from c1 and c2. Adding the element to the selector gives it greater weight.

Please post a link.

cheers,

gary

 

Hi k²5st, thanks for looking into my problem.
I think all the information was given in my example, there is not much more in my real page (regarding this very problem).

As you said, it was a "same weight" problem, FF takes the 1st rule c1 that takes precedence over c2 - I had a look at the CSS rules weight calculation (w3.org) and - while I don't agree the principle but this is something else - it appears it was the problem.

To fix this, I just added some weight (more specificity) to the 2nd rule

.c1 .c2 td { color:#bbb }

Code (markup):

and it works fine now.
You pointed to the right direction.