By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Overriding table row color

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
"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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.