- Specificity determines, which CSS rule is applied by browsers. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.” [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. [Selector Specificity]
- Every selector has its specificity. “All rules in your CSS 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]
- If two selectors apply to the same element, the one with higher specificity wins.
Specificity hierarchy
- Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:1. Inline styles (Presence of style in document).
An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.<h1 style="color: #fff;">2. IDs (# of ID selectors)
ID is an identifier for your page elements, such as#div.3. Classes, attributes and pseudo-classes (# of class selectors).
This group includes.classes,[attributes]and pseudo-classes such as:hover,:focusetc.4. Elements and pseudo-elements (# of Element (type) selectors).
Including for instance:beforeand:after.
If you don’t know what exactly each of these terms stands for, you can take a look at the brief overview of them; in the last section of this article.
