John,

Seeing this email reminded me of something.

Yes, some CSS properties are inherited and some aren't.

Inheritance depends on *specificity*, which can be reduced to a mathematical formula, as in this quote from the definitive O'Reilly book by Eric Meyer, where it says:

  H1 {color: red;}                    /* specificity = 1 */
  P EM {color: purple;}               /* specificity = 2 */
  .grape {color: purple;}             /* specificity = 10 */
  P.bright {color: yellow;}           /* specificity = 11 */
  P.bright EM.dark {color: brown;}    /* specificity = 22 */
  #id216 {color: blue;}               /* specificity = 100 */

which makes sense.

However, I know I've read an article also by Eric, which says that those nice numbers which make so much sense at first glance are not in base ten.

I'm sure it was in his own personal website, but I can't seem to find it. I remember being puzzled by it at the time. If not base 10, then what? Hex? So a specificity of 11 is actually seventeen? And 17 is actually 23? Maybe I misinterpreted something?

I'd appreciate any light members could shed on this,

The numbers have no base at all (well, some very large one that may change in future and is not really relevant)


See the specification for exact details

http://www.w3.org/TR/CSS21/cascade.html#specificity

But in a nutshell, you calculate the specificity like this

Get the following four values

A: is it in a style attribute or not (A=1 in the former, A=0 in the latter)

B =count the number of id attributes in the selector (note this is only those of form #, not [id="somidvalue"])

C = count the number o other attributes and pseudo classes in the selector

D = count he number of element names and pseudo elements in the selector

Then Concatenate (don't add) A, B , C, D

So, if A=1, then we might have B=0, C=0, D=0 and the number would be 1000

and so on.

In essence, it doesn't really matter, because

1. if it is in a style attribute, (eg <p style="...">) then it will certainly be more specific than anything else

2. if it contains an id, (p#anID) it will be more specific than any selector without an id, and so on.

hope this helps a bit,

john

                        :: westciv :: http://www.westciv.com/
                software, courses, resources for a standards based web
        :: style master blog :: http://westciv.typepad.com/dog_or_higher/
     :: WebEssentials Sept 2004 Sydney Australia :: http://www.we04.com

******************************************************
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************



Reply via email to