Class Style order

[tshad]

When dealing with an order of precedence, I understand that:
1) inline style in the style attribute takes precedence over the same style in a class where the class is on the page
2) the style in the class on the page takes precedence over the same style that is in a class in a css file

But what about if you have something like:

<tr class="rowstyle startRowstyle">

where the styles are in different classes on the same page or in different classes in the same css file.

<style type="text/css">
.startRowstyle
{
background-color: Green ;
}
.rowstyle
{
background-color: Blue;
}
</style>

I was under the impression the order was defined by the order in the class statement where the last one defined in the class statement would override the first one.

But that doesn't seem to be the case.

In my example, the class statement in my <tr> tag has the order (Blue, Green). So I would expect that the table would have Green rows. But it doesn't seem to. The order in my styles has Green first and Blue second and my table is Blue.

If I don't change the order in the class statement and reverse the order in the Style section where Green now follows the Blue, the table is Green.

So the order is not dictated by the order in the class attribute but by the order of precedence either in the styles on the page or the order in the styles sheet.

Is this correct?

Thanks,

Tom

 

[ChrisHirst]

The rules defined LAST in the rule or stylesheet cascade are the ones that has precedence.




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[tshad]

I thought that was the case after working with this.

But I now have a table where no matter where the class is, it is getting overwritten.

I have the following in my sheet:

.tablegrid TD {
BORDER-BOTTOM: #404040 1px solid;
TEXT-ALIGN: center;
BORDER-LEFT: #404040 1px solid;
BORDER-TOP: #404040 1px solid;
BORDER-RIGHT: #404040 1px solid;
}

This class is in my table element.

I have a particular column (td) where I want to override the TEXT_ALIGN so it is aligned left. So I created this class:

.gridCell
{
text-align: left;
padding-left: 5pt;
}

No matter where I put it in the sheet before the ".tablegrid TD" or after it, my gridcell value is still overridden by ".tablegrid TD".

When I look at it in the Developer Tools, it shows the gridCell first then the "tablegrid TD" and the text-align in the gridCell is struck out.

How do I get around that?

Thanks

Tom

 

[ChrisHirst]

CSS can be case sensitive with elements, attribute and property names depending on the DTD, (and OS to a lesser extent,) therefore TEXT-ALIGN and text-align are NOT necessarily equal. XHTML, XML are case sensitive HTML is not.

have a particular column (td) where I want to override the TEXT_ALIGN so it is aligned left. So I created this class:

.tablegrid TD

and

.gridCell

.ridCell is NOT going to override any settings from .tablegrid, because ".tablegrid TD" is a more specific selector than ".gridCell" is, so has priority on TD elements.

Specificity

If you want to override class rules on one specific element use ID applied rules, or give the override ruleset a higher specificity.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum