class vs. style

01-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?

01-18-2007

On 2007-01-18, dfloss <> wrote:
> 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".

01-18-2007

Scripsit Ben C:

>> .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.

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.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

01-18-2007

In article <FFSrh.50393$> ,
dfloss <> wrote:

> 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)

--
dorayme

01-18-2007

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

css is cheap, html is expensive

01-19-2007

In article <xwTrh.62507$> ,
dfloss <> wrote:

> (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?

--
dorayme

01-19-2007

dfloss wrote:
> (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; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

01-19-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.

01-19-2007

Scripsit dorayme:

>> Can someone explain the behind the scenes reasons?
>
> 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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

01-19-2007

Hi,

Jukka K. Korpela wrote:
> Scripsit Ben C:
>
>>> .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 -->
>>
>> 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}

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
new-style class or old-style class?	Jayden	Python	9	09-27-2012 12:30 AM
Nested Class, Member Class, Inner Class, Local Class, Anonymous Class	E11	Java	1	10-12-2005 03:34 PM
A parameterized class (i.e. template class / class template) is not a class?	christopher diggins	C++	16	05-04-2005 12:26 AM
Need help with Style conversion from Style object to Style key/value collection.	Ken Varn	ASP .Net Building Controls	0	04-26-2004 07:06 PM
New style class & Old style class in Python	dlo_olb	Python	2	06-25-2003 01:46 PM