When working with jQuery mobile, the framework assigns it own set of classes and elements to the DOM. In an attempt to override the styles of the framework, I had an aha moment and realized that an important rule of specificity – Ids and Classes carry different weights.

When declaring style rules just adding more classes and elements to a declaration doesn’t mean that it will override another style. What matters is what selectors are being used compared to the selectors used in the other style declaration. A style rule specified before another with a higher specificity number will override the subsequent rule. The specificity number can be calculated based on IDs; classes, attribute selectors, and pseudo-selectors; and then elements and pseudo-elements.

  • Inline styles are worth a 1000 points
  • IDs are worth 100 points each
  • Classes, attribute selectors, and pseudo-class are worth 10 points each
  • Elements and pseudo-elements are worth 1 point each

More information can be found  in the the W3 CSS Spec documentation on specificity or this post from Smashing Magazine.

« Back to Blog