Sent by Donna Casey on 1 March 2005 19:07
several folks were discussing:
> And when I preview, whatever markup I am trying to style doesn't *take*
> what I am trying to do. However, if I add a more precise definition by
> adding something like this:
> td#foo {whatever}
> Suddenly the cell I am trying to style does what I want. Without adding
> "td" it doesn't work.
I'd look at a couple of things:
1) are you using that ID more than once (you shouldn't)?
2) how do you write all the other declarations?
My first guess is that you are using the ID more than once-so specifying
the tag (selector) with the ID would make it more specific than the
generic ID only. If #foo is applied more than once (let's say to both a
div and a table cell), writing td#foo clears up the confusion. (and
while that seems like a good thing, it isn't the better "big picture"
approach, imo.)
Another circumstance I could think of (without seeing the page) is that
some other combination of properties in one or more other declarations
overrides those set in #foo because *they* are more specific. Writing
td#foo increases the specificity, and maybe that is enough to make it
the more powerful (more specific) rule.
And speaking of specificity, I tend to write my declarations as simply
as possible, reserving extremely specific names until I really need
them. By this, I mean I would use: "#sidebar {}" instead of using
"div#sidebar {}" or, in a more extreme example, why use "body
div#wrapper div#sidebar a {}" when "#sidebar a" works? I would reserve
the other for an "emergency" use. I guess I am saying, reserve high
degrees of specificity for when you really need it. It makes judging the
specificity of declarations easier in the overall sense of the entire
sheet as applied to the page.
Here is a very simple example:
http://www.n2dreamweaver.com/tips/very-specific.htm
There is one div of the ID #foo. There are two declarations:
div#foo {
background-color: #FFCC00;
}
#foo {
background-color: #99FF00;
position: absolute;
height: 200px;
width: 200px;
left: 10px;
top: 10px;
border: 1px solid #330099;
}
The background color property conflicts and normally, you'd think that
the second value supplied would "win" because it is last read. But it
isn't so. Why not? Because the first declaration is named more
specifically. So, this shows how the two ways of naming declarations
*are not* equal.
And to get back to the point about the "big picture" ...if you have to
judge specificity for all your rules, can you imagine how much more
difficult it is when you are increasing the specificity of every name?
K.I.S.S. (keep it simple stupid) is something I learned in junior high
(I think I can remember that far back ;) and I've found it applies
throughout life--and even in CSS ;)
Donna Casey
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
