css Inheritance 1

[tshad]

I am trying to better understand inheritance in css.

I have a table that I set up with alternate colors for the rows.

table.X5
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X5 tr.odd td
{
background-color: red;
color: #efef00;
text-align: left;
border: 4px solid pink;
}
table.X5 tr.evn td
{
background-color: green;
color: #00efef;
text-align: right;
border: 4px solid lime;
}

the table is:

<table class="X5" cellspacing="2">
<tr class="odd">
<td>
</td>
<td>
John
</td>
<td>
Jane
</td>
<td>
Total
</td>
</tr>
<tr class="evn">
<td>
January
</td>
<td>
123
</td>
<td>
234
</td>
<td>
357
</td>
</tr>
<tr class="odd">
<td>
February
</td>
<td>
135
</td>
<td>
246
</td>
<td>
381
</td>
</tr>
<tr class="evn">
<td>
March
</td>
<td>
257
</td>
<td>
368
</td>
<td>
625
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
515
</td>
<td>
848
</td>
<td>
1363
</td>
</tr>
</table>

this creates a table with alternating rows colored green and red with pink and light green borders around the cells (td).

If I change the style to take the td's off it looks all the same except for the pink and light green borders.

table.X5
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X5 tr.odd
{
background-color: red;
color: #efef00;
text-align: left;
border: 4px solid pink;
}
table.X5 tr.evn
{
background-color: green;
color: #00efef;
text-align: right;
border: 4px solid lime;
}

Why did taking the tds off the tr lines apply everything but the borders?

Thanks,

Tom

 

[ChrisHunt]

Border properties are not inherited - if you applied a border to a <div>, you wouldn't want it inherited by all the elements it contains to get lots of little borders inside. So your original rules applied the border to the td elements, the new one applies it to the tr elements.

Borders on a tr element are not rendered (on most browsers), which is why you don't see them.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tshad]

I see.

And if I added another style for td, it would apply only to the cells that didn't explicitely have a style applied to the row for the first example. For example, if I added the following, I would see only the last row with the yellow background and blue text on it.

table.X5
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X5 td
{
color: Blue;
background: Yellow;
padding: 6px;
font-weight: bold;
width: 5em;
}
table.X5 tr.odd td
{
background-color: red;
color: #efef00;
text-align: left;
border: 4px solid pink;
}
table.X5 tr.evn td
{
background-color: green;
color: #00efef;
text-align: right;
border: 4px solid lime;
}

But if I changed take the td off off of the tr styles, all the cells are yellow:

table.X5
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X5 td
{
color: Blue;
background: Yellow;
padding: 6px;
font-weight: bold;
width: 5em;
}
table.X5 tr.odd
{
background-color: red;
color: #efef00;
text-align: left;
border: 4px solid pink;
}
table.X5 tr.evn td
{
background-color: green;
color: #00efef;
text-align: right;
border: 4px solid lime;
}

Why does the "tr.evn td" take preference over the "td" style but the "tr.evn" not?

Thanks,

Tom

 

[vacunita]

And if I added another style for td, it would apply only to the cells that didn't explicitely have a style applied to the row for the first example. For example, if I added the following, I would see only the last row with the yellow background and blue text on it.

table.X5 td
{
color: Blue;
background: Yellow;
padding: 6px;
font-weight: bold;
width: 5em;
}

Not quite, the rule above would technically apply to all cells within the table with a class of X5. However, because there are other more specific rules there that override properties they take precedence.

In your example above

table.X5
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X5 td
{
color: Blue;
background: Yellow;
padding: 6px;
font-weight: bold;
width: 5em;
}
table.X5 tr.odd td
{
background-color: red;
color: #efef00;
text-align: left;
border: 4px solid pink;
}
table.X5 tr.evn td
{
background-color: green;
color: #00efef;
text-align: right;
border: 4px solid lime;
}

All rows start out being yellow, but the odd and evn rules are more specific and override that setting. If you take the td off of the rules, then they are only applying them to the rows. Since background-color also doesn't get inherited by default, you'll end up with yellow cells still over the different colored background of the rows.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[tshad]

OK.

What about the following where there is no class applied to rows.

table.X6
{
border-left: 12px groove #bebea9;
border-top: 12px groove #bebea9;
border-right: 12px groove #909070;
border-bottom: 12px groove #909070;
}
table.X6 td
{
color: Blue;
background: Yellow;
padding: 6px;
font-weight: bold;
text-align:left;
width: 5em;
}
table.X6 tr td
{
background-color: red;
color: #efef00;
text-align: center;
border: 4px solid pink;
}

And the Table:

<table class="X6" cellspacing="2">
<tr>
<td>
</td>
<td>
John
</td>
<td>
Jane
</td>
<td>
Total
</td>
</tr>
<tr>
<td>
January
</td>
<td>
123
</td>
<td>
234
</td>
<td>
357
</td>
</tr>
<tr>
<td>
February
</td>
<td>
135
</td>
<td>
246
</td>
<td>
381
</td>
</tr>
<tr>
<td>
March
</td>
<td>
257
</td>
<td>
368
</td>
<td>
625
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
515
</td>
<td>
848
</td>
<td>
1363
</td>
</tr>
</table>

In this scenario, the "tr td" seems to take preference over the "td" and the cells are red. If I take the td off of the tr style, the cells are yellow.

Also, how do I tell what is inherited and which is not?

Thanks,

Tom

 

[vacunita]

As I said above, certain rules are more specific than others, so take precedence. Look up Specificity.

In your example the [blue]table.X6 tr td[/blue] is more specific as it targets cells with in rows that are within the table with the class of X6, while [blue]table.X6 td[/blue] targets all cells inside the X6 table. . While it is invalid to have cells that are not within rows its still less specific to target just any cell rather than a cell with in a row.

Also, how do I tell what is inherited and which is not?

Research.
W3Schools.com CSS definitions and Usage: Background Color

As you can see, it states there that its not inherited.

Alternatively, you could go and read the CSS spec at W3C and find the same information, only not as nicely presented.

W3 css definition

14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

'background-color'
Value: <color> | transparent | inherit
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[ChrisHunt]

There's a fun take on CSS specificity here:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tshad]

That helped out a lot.

Thanks,

Tom