Overriding table row color

Fizgig

Hi,

I've applied the defTable style to a table (snip 1 below), but when i assign
a single TR in that table another style with a different background color
(snip 2 below), the background color isn't overridden. What goes wrong?

Thanx,

Ward
snip 1 ###############
..defTable { border-collapse: collapse; }
..defTable tr { border-top: 1px solid #5F2028; border-bottom: 1px solid
#5F2028; background-color: #FDE6D0;}
..defTable td
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
snip 2 ###############

..selectedRow { background-color: #FABF87;}

Jul 20 '05 #1

Lauri Raittila

Fizgig wrote:

Hi,

I've applied the defTable style to a table (snip 1 below), but when i assign
a single TR in that table another style with a different background color
(snip 2 below), the background color isn't overridden. What goes wrong? .defTable tr { border-top: 1px solid #5F2028; border-bottom: 1px solid
.selectedRow { background-color: #FABF87;}

First is more specific. Use tr.selectedRow instead.
See spec for cascading rules
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

Jul 20 '05 #2

Steve Pugh

"Fizgig" <fi****@NOequanimitySPAM.nl> wrote:

I've applied the defTable style to a table (snip 1 below), but when i assign
a single TR in that table another style with a different background color
(snip 2 below), the background color isn't overridden. What goes wrong? .defTable tr { border-top: 1px solid #5F2028; border-bottom: 1px solid
#5F2028; background-color: #FDE6D0;}

.selectedRow { background-color: #FABF87;}

Specificity

The first selector has a specificity of 11 and the second has a
specificity of 10 so the first one always overrides the second one.

See http://www.w3.org/TR/CSS2/cascade.html#specificity

You need to make the second one more specific (or equally specific if
it is defined later in the CSS).

..defTable tr.selectedRow has a specficity of 21.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #3

Fizgig

That does the trick! I'm such a newbie ;-)

Thank you Lauri & Steve
"Steve Pugh" <st***@pugh.net> wrote in message
news:p8********************************@4ax.com...

"Fizgig" <fi****@NOequanimitySPAM.nl> wrote:

I've applied the defTable style to a table (snip 1 below), but when i assigna single TR in that table another style with a different background color
(snip 2 below), the background color isn't overridden. What goes wrong?

.defTable tr { border-top: 1px solid #5F2028; border-bottom: 1px solid
#5F2028; background-color: #FDE6D0;}

.selectedRow { background-color: #FABF87;}

Specificity

The first selector has a specificity of 11 and the second has a
specificity of 10 so the first one always overrides the second one.

See http://www.w3.org/TR/CSS2/cascade.html#specificity

You need to make the second one more specific (or equally specific if
it is defined later in the CSS).

.defTable tr.selectedRow has a specficity of 21.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #4