CODEWITHSUNDEEP
htmlcsshtml-table
Shadow
Shadow

Reputation: 1042

CSS & Overriding Styles on Nested Elements works only partially

I am wondering about the following code:

<html>
        <head>
        <title>Test HTML</title>
        <link rel="stylesheet" type="text/css" href="test.css">
        </head>
<body>
<table class=foo cellpadding="2" cellspacing="2">
         <tr>
             <td><b>Contingency Table:</b></td>
             <td><table class=bar border="2" align="left">
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
               </table>
             </td>
         </tr>
</table>
</body>
</html>

with the following CSS:

table {
        border-width: 2px;
        border-spacing: 2px;
        border-style: solid;
        }  

table.bar {
        border-color: red;
        background-color: white;
}

table.bar td {
        background-color: green;
}

table.bar tr {
        background-color: black;
}

table.foo {
        border-color: blue;
        background-color: white;
}

table.foo td {
        border-color: black;
        background-color: yellow;
}

table.foo tr {
        background-color: yellow;
}

The problem is, when interchanging the classes "foo" and "bar" in the table and its nested table, the style of the td-tags is not correctly set, or at least as not as expected by me. When changing from outer "bar" and inner "foo" to outer "foo" and inner "bar" the colors change as expected, except for the colors of the td-element. What am I doing wrong here, since the other elements of a table change correctly?

I know that using table table.foo {...} would work, but this requires to know which style should be used for the inner/nested table and I don't really like this idea. I want to be able to interchange the styles when desired and not include the "inheritance" in the style-sheet... Also dictating the order of the foo or bar styles in the style-sheet is not desirable for me. Please correct me, if this is actually common HTML/CSS practice.

Upvotes: 1

Views: 9856

Answers (3)

BenWells
BenWells

Reputation: 327

If you only want yto effect the direct children of table foo you need some child selectors. You might need to look thees up as I know they can be used as a work around for older browsers. Additionally I'd advise adding tbody to your table as firefox does this automatically and it messed up my testing of the child selectors:

table.foo > tbody > tr > td {
        border-color: black;
        background-color: yellow;
}

table.bar > tbody > tr > td {
        background-color: green;
}

Should work in firefox, you would have to test other browsers. The issue you were having has been explained in other posts but is the nature of cascading style sheets as your code was originally any td inside table.foo was effected by the style table.foo td. Alternatively you will have to switch the order of the styles so the nested styles are always overidding the outer table styles.

Upvotes: 0

davin
davin

Reputation: 45555

xzyfer's reasoning is right. A simple workaround could be to add

table table.bar td { background-color: green !important; }

Assuming your nesting is at most 2 levels, this works fine, because it overrides the cascading effect described (i.e. the rule applied is no longer dependant on the order the rules are defined).

Working example: http://jsfiddle.net/RQCQS/

Upvotes: 2

xzyfer
xzyfer

Reputation: 14135

CSS - Cascading style sheets!

Put simply, if you switch the foo and bar classes in you tables, you'll also need to move the table.foo css rules above the table.bar classes.

Explanation If bar is nested in foo the css rule table.foo td matches both the tds in both the foo and bar tables. So it the table.foo td is declared after the table.bar td rule, the table.foo td rule overwrites the table.bar td

Upvotes: 3

Related Questions