CSS Specificity

See: Calculating a selector's specificity.

Stylesheet Origin

• author stylesheet
• reader (user) stylesheet
• browser (user agent) stylesheet

Specificity of Selector

• style attribute
• count "id" attributes
• count number of other attributes ("class")
• count element names

Order

• last occurence has higher specificity

  @import-ed stylesheets come before rules in the importing sheet.

CSS Selector Specificity

Specificity is expressed in a form of a list of four numbers: (a,b,c,d)

1. inline style
2. id
3. class, pseudo-class and attributes
4. element and pseudo-elements

Start comparing at "a", if equal go to "b", etc.

nav li {...}                     /* (0,0,0,2) */
nav.primary {...}                /* (0,0,1,1) */
nav.primary li {...}             /* (0,0,1,2) */
nav.primary li:first-child {...} /* (0,0,2,2) */
nav.primary li.getinfo {...}     /* (0,0,2,2) */
#globalnav {...}                 /* (0,1,0,0) */

#globalnav >
nav.primary li.getinfo >
nav.primary li:first-child >
nav.primary li >
nav.primary >
nav li