class vs. style

dfloss · Jan 18, 2007

given this css:

..no_left_border {border-left: 0px solid}
table td {border-left: 1px solid}

<td class="no_left_border"> <-- doesn't work -->
<td style="border-left: 0px solid"> <-- works -->

Can someone explain the behind the scenes reasons?

Ben C · Jan 18, 2007

given this css:

.no_left_border {border-left: 0px solid}
table td {border-left: 1px solid}

<td class="no_left_border"> <-- doesn't work -->
<td style="border-left: 0px solid"> <-- works -->

Can someone explain the behind the scenes reasons?

table td is more "specific" than .no_left_border, so wins. But the style
attribute is more specific still.

See http://www.w3.org/TR/CSS21/cascade.html, particularly 6.4.3
"Calculating a selector's specificity".

Jukka K. Korpela · Jan 18, 2007

Scripsit Ben C:

table td is more "specific" than .no_left_border, so wins. But the
style attribute is more specific still.

Right. So a practical conclusion is that you can affect this by using a more
specific selector in the first rule, e.g.

table td.no_left_border {border-left: 0px solid}

(You could alternatively use !important, but it's easy to create confusion
that way. Reserve !important for special occasions.)

dorayme · Jan 18, 2007

dfloss said:
given this css:

.no_left_border {border-left: 0px solid}
table td {border-left: 1px solid}

<td class="no_left_border"> <-- doesn't work -->
<td style="border-left: 0px solid"> <-- works -->

Can someone explain the behind the scenes reasons?

But what is the question exactly? If you wondering why

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE TYPE='text/css'>
.no_left_border {border-left: 0px solid}
}
</STYLE>
</HEAD>

<BODY>
<table><tr>
..no_left_border {border-left: 0px solid}
</td>
</table>
</BODY>
</HTML>

does not display a left border, it is because you have said not
to have one (the proper way is ": 0" not "0px solid" btw)

dfloss · Jan 18, 2007

(the proper way is ": 0" not "0px solid" btw)

css is cheap, html is expensive

dorayme · Jan 18, 2007

dfloss said:
(the proper way is ": 0" not "0px solid" btw)

css is cheap, html is expensive

Why concentrate on the side issue instead of your main one?

Jonathan N. Little · Jan 18, 2007

dfloss said:
(the proper way is ": 0" not "0px solid" btw)

css is cheap, html is expensive

Not sure what that means but to fix your CSS:

table td { border-left: 1px solid; }
table td.no_left_border { border-left: 0; }

dfloss · Jan 18, 2007

Not sure what that means but to fix your CSS:

table td { border-left: 1px solid; }
table td.no_left_border { border-left: 0; }

Thank you sir. That was exactly what I was looking for.

Jukka K. Korpela · Jan 19, 2007

Scripsit dorayme:

But what is the question exactly?

The question was clear enough, though perhaps a bit too implicit. It was
about explaining an apparently unintuitive behavior, and an explanation was
given.

If you wondering why - -
does not display a left border,

No, your clarification did not clarify anything. Your example contains
several syntax errors in HTML and it lacks a crucial piece of code that was
given in the question.

it is because you have said not to have one

No, _you_ omitted the piece of code for that.

(the proper way is ": 0" not "0px solid" btw)

What on &Planet; are you babbling? Using duplicate colons (as your
suggestion would mean) makes a CSS declaration syntactically malformed so
that conforming browsers ignore it. The values 0 and opx are (in the given
context) completely equivalent. And not specifying border style in a
declaration like
border-left { ... }
is equivalent to setting it to solid. Thus, you are just playing with
irrelevant variation - in addition to suggesting an extra colon.

Robin Rattay · Jan 19, 2007

Hi,

Scripsit Ben C:

Right. So a practical conclusion is that you can affect this by using a more
specific selector in the first rule, e.g.

table td.no_left_border {border-left: 0px solid}

I need to delurk for a moment, since I'm confused.

I've re-read the CSS specification on specificity, and tested it in FF,
resulting in the conclusion, that ".no_left_border" is more specific
than "table td" (0010 verses 0002). So both examples of the OP should be
showing no border, i.e. "working".

Robin

Ben C · Jan 19, 2007

Hi,

I need to delurk for a moment, since I'm confused.

I've re-read the CSS specification on specificity, and tested it in FF,
resulting in the conclusion, that ".no_left_border" is more specific
than "table td" (0010 verses 0002). So both examples of the OP should be
showing no border, i.e. "working".

You're right, I just read that section again (6.4.3), and everything you
say is correct. I spoke too soon. I also tried it in Opera and Konqueror
and it worked as expected.

Toby Inkster · Jan 19, 2007

dfloss said:
class vs. style

I like to think I have a bit of both.

dorayme · Jan 19, 2007

"Jukka K. Korpela said:
Scripsit dorayme:

The question was clear enough, though perhaps a bit too implicit. It was
about explaining an apparently unintuitive behavior, and an explanation was
given.

No, your clarification did not clarify anything. Your example contains
several syntax errors in HTML and it lacks a crucial piece of code that was
given in the question.

I am sorry, you are right, it was a dreadful misreading of the OP
for a start and sloppy cutting and pasting in my reply to what I
too hastily thought was a newbie error. I am going into the
backyard now to hit myself repeatedly with a 2" x 4" piece of
hardwood. Stand by for better quality posts.

Jukka K. Korpela · Jan 19, 2007

Scripsit Robin Rattay:

I need to delurk for a moment, since I'm confused.

Fine. (I mean your delurking, not confusion.

)

I've re-read the CSS specification on specificity, and tested it in
FF, resulting in the conclusion, that ".no_left_border" is more
specific than "table td" (0010 verses 0002). So both examples of the
OP should be showing no border, i.e. "working".

You are quite right. I was careless enough to think only in terms of names
in a selector, but indeed the context matters: any selector with at least
one class selector has higher specificity than a selector that contains
element names only.

So I guess we'd next need to know where it didn't work. The OP probably had
a syntax error somewhere and that error was fixed when he tried some of the
suggestions. As usual, posting a URL would have saved some time and effort.

Roy A. · Jan 20, 2007

Ben C skrev:

table td is more "specific" than .no_left_border, so wins. But the style
attribute is more specific still.

See http://www.w3.org/TR/CSS21/cascade.html, particularly 6.4.3
"Calculating a selector's specificity".

I notice that the pseudo-classes :link, :visited, :active, :focus,
:hover have the same weight.

According to these rules, putting these classes in a certain order in
the stylesheet doesn't make sense. By using an element name before the
pseudo-class, e.g. a:active, would ensure that this style take
precedence. But, is there any default cascading order for these
classes? I suspect it is vendor specific.

Ben C · Jan 20, 2007

Ben C skrev:

This was wrong: .no_left_border is more specific than table td.

I notice that the pseudo-classes :link, :visited, :active, :focus,
:hover have the same weight.

They all affect specificity equally, yes.

According to these rules, putting these classes in a certain order in
the stylesheet doesn't make sense. By using an element name before the
pseudo-class, e.g. a:active, would ensure that this style take
precedence. But, is there any default cascading order for these
classes? I suspect it is vendor specific.

It's all specified, see 6.4.1. You sort by origin, then by specificity,
and finally by the order in which they appeared. There should be always
one and only one right answer for what styles an element should get from
the cascade.

Roy A. · Jan 20, 2007

Ben C skrev:

It's all specified, see 6.4.1. You sort by origin, then by specificity,
and finally by the order in which they appeared. There should be always
one and only one right answer for what styles an element should get from
the cascade.

Ah, I see. Given <a href="#">link</a> and

:active { color: black } :hover { color: lime }

the latter wins.

Similarly. Given <td class="no_left_border left_border"> and

..left_border {border-left: 1px solid}
..no_left_border {border-left: 0px solid}

the latter (in the stylesheet) wins.

Now it make sense to me to.

Colspan probs	2	May 21, 2026
Having trouble centering contents of td ?	3	May 2, 2023
Interfering CSS	1	Feb 9, 2024
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
Bootstrap contact form not working	2	Feb 15, 2025

class vs. style

dfloss

Ben C

Jukka K. Korpela

dorayme

dfloss

dorayme

Jonathan N. Little

dfloss

Jukka K. Korpela

Robin Rattay

Ben C

Toby Inkster

dorayme

Jukka K. Korpela

Roy A.

Ben C

Roy A.

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads