1. Computing & Technology

Discuss in my forum

How To Determine a Style Property's Specificity Rating

By , About.com Guide

CSS specificity helps determine when a style property will be applied regardless of where it appears in the style sheets. The more specific a style property is, the more likely it will be applied to the element. These simple steps will help you figure how how specific your style properties are.
Difficulty: Average
Time Required: 5 minutes

Here's How:

  1. Count the number of element names in the selector.
    * { ... } is 0,
    p { ... } is 1 and
    div p { ... } is 2.
  2. Count the number of pseudo-classes and other non-ID attributes in the selector, and multiply by 10.
    :active { ... } is 10 and
    .external:link { ... } is 20.
  3. Count the number of ID attributes in the selector, and multiply by 100.
    #hot { ... } is 100.
  4. Add up all three numbers, and that is that property's specificity.
  5. div a { ... } = 2
  6. div.top a { ... } = 12
  7. #main div.top a { ... } = 112
  8. blockquote ul+li { ... } = 3
  9. h2 + a[title] { ... } = 12
  10. h2 + a[title]:active { ...} = 22

Tips:

  1. The higher the specificity number, the more likely it will be applied.
  2. Negative selectors are counted just like their simple selectors argument.
  3. Ignore pseudo-elements.

©2012 About.com. All rights reserved.

A part of The New York Times Company.