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