Cheat sheet for calculating CSS specificity

CSS posted about 1 year ago by christian

   1  *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
   2  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
   3  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
   4  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
   5  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
   6  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
   7  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
   8  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
   9  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
  10  
  11  style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
  12  

From the CSS specificity calculator

Note that using the !important CSS declaration raises the CSS specificity so avoid it.

Tagged css, specificity, calculator, important