Sent by Jim Gay on 23 July 2003 22:10
>> but your main point is correct. if I do:
>> p {color: red}
>> p {color: blue}
>>
>> blue wins because it is the latter specified.
>
> What about this, though?
>
> div#foo p {color: red}
> p {color: blue}
>
> Which wins?
div#foo p should. its more specific. ids are at the top of the chain with a
higher score of specificity.
foo followed by p is more specific than just saying p
p {} sets up the rules for all p tags. but #foo p {} sets up the rules for
any p child of #foo.
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
this is the same reason the Modified Simplified Box Model Hack works.
http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
* html <selector>
is more specific than
<selector>
so it doesn't matter what order you place them in the css file.
so the hack works if its
* html p {}
p {}
or
p {}
* html p {}
-- please note that * html p is valid css, but shouldn't work in a proper
standards browser. its a hack on IE browsers.
'*' signifies whatever comes before <selector>, but in this case its
nothing, since the <selector> is 'html' and html is the root; there is
nothing before html, so '* html' leads nowhere.
IE doesn't understand this properly, and gives it a higher specificity
score.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
