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