--- On Mon, 12/13/10, Angela French <[email protected]> wrote:
> From: Angela French <[email protected]>
> Subject: [css-d] should this class override my other one?
> To: "'css-d ([email protected])'" <[email protected]>
> Date: Monday, December 13, 2010, 4:50 PM
>
> ... I made a class like this:
>
> td.center {text-align:center;}
>
> ... The .css file that was called with a link tag, had the following
> class in it:
>
> .center
> { display: block;
> text-align: center;
> margin: 0 auto;
> }
>
> My question is this. It appears in FF that .center
> was being applied to my td in addition to my
> td.center. But not so in IE. Can anyone explain
> this to me?
Hi Angela,
Both should be applied. Any selector (e.g. ".center") in any CSS file or head
section, that matches a given element, should apply to that element.
td.center happens to be more specific than .center, but that's only relevant
for overriding individual CSS properties that are the same. In this case, the
property declaration is exactly the same anyway, but:
.center { text-align: left; }
should not have any effect, since td.center { text-align: center; } is more
specific. Here's a short example demonstrating (at least some of) the relevant
issues:
/* 1 */ td.center { font-size: 120%; background-color: red; }
/* 2 */ .center { color: red; font-size: 100%; }
/* 3 */ .center { color: blue; }
/* 4 */ body td.center { background-color: green; }
The above CSS will affect a '<td class="center">' like so:
1. color: blue - declarations 2 and 3 match and are equally specific, so the
second one will apply (the latest equal match always applies)
2. font-size: 120% - since the first declaration is more specific than any
later, its font-size wins out
3. background-color: green - the 4th declaration is more specific, so overrides
the 1st
Remember that:
.foo { font-size: 10px; color: red; }
is just a shorthand for:
.foo { font-size: 10px; }
.foo { color: red; }
and is exactly equivalent. So overriding according to specificity applies to
individual attribute/value declarations, not entire blocks of declarations.
- Bobby
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
