If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Separate from Floats , CSS Specificity is being considerate a hard and complex concept of Cascading Style Sheets. If sometimes your CSS doesn’t respond to your codes, that’s because the different weight of selectors. The most important is to start to understand how your browser interpret your code. And for that you need to have an understanding on how specificity works. Such problems are made because the fact that on your CSS you have defined a more specific selector.
CSS Specificity is not that easy, and trough this article we are trying to explain the concept.
Definition of Specificity
In short words Specificity determines on which CSS rules is being applied by browser. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.”[Understand Specificity]
All selectors have their specificity. “All rules in your style sheet carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.”[Understanding Specificity]
Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. It’s a simple enough process, but has caught out a lot of developers at some point in their career. [Selector Specificity]
Principles
- Unequal specificity: “A selector can contain one or more reference points, the greater the specificity rating of these reference points the more specific your rule is.” [Understanding Specificity]