Specificity in CSS

Specificity is one of the criteria used by the browser (or other user agents) in case of conflict to classify existing CSS instructions. Consider the following example, very simplified:

h3 {color:# black;}
h3 {color:#red:}

An h3 is represented in red because the instruction appears last.

Here the <h3> is represented in black within a <div>, despite the following instruction indicating to represent <h3> in red. Put another way: all <h3> are represented in red unless they appear inside a <div> element, in which case they will be represented in black.

All rules defined in CSS are assigned an internal number of four digits. This number is the one that is taken into account internally when ordering cascade instructions.

The rules that are followed in the process are the following:

Group A (first digit): CSS rules defined in the source code by means of a style attribute. The HTML attribute replaces the selector in this case. Inline styles always get the highest priority, that is, 1,0,0,0.

Group B (second digit): the number of ID attributes of the selector. Each attribute selector ID (#) has a rating of 0.1,0,0.

Group C (third digit): The number of all other attributes (including classes) and pseudo-classes within the selector. All class or pseudo-class selectors get 0.01.0.

Group D (fourth digit): The number of element names and pseudo elements that the selector contains. All element or pseudo element selectors obtain a 0,0,0,1 in the sort.

Combiners and universal selectors do not receive any sorting position. The same happens with the elements and attributes of the source code, which are cataloged as "negligible" (deprecated) by W3C. The browser has to convert them to their CSS equivalent to be able to interpret them.

The browser interprets the groups from left to right and classifies them in the same order. If equivalent definitions appear, the ones that are furthest to the left will have priority.

The following table gives us a clearer idea of these values.

Selector	A Styke	B ID	C Class	D Element	Specificity
* {…}	0	0	0	0	0000
p {…}	0	0	0	1	0001
ul li {…}	0	0	0	2	0002
ul li.red {…}	0	0	1	2	0012
#name {…}	0	1	0	0	0100
div#menu a:hover {…}	0	1	1	2	0112
style=”…”	1	0	0	0	1000

It is possible to manipulate the specificity and thus achieve certain design objectives. An artificial way to increase the specificity could be the following:

p.name {…} =0011
#content p.name {…} =0111
html body #content p.name {…} = 0113

All these rules apply to the element p .name, but each rule has priority over the previous ones. If we work with alternative style sheets, this can be an interesting way to increase priorities.

Summary

The hierarchical order in which a browser will process a series of cascading instructions and elements:

• The browser scans the document for style instructions.
• The instructions of equivalent value are classified according to their origin. The rules are:
• The user style sheets marked as! Important have priority over those of author also marked as !important
• The author's style sheets designated as! Important have priority over those that do not carry !important
• Authenticated author style sheets take precedence over the unimportant user style sheets
• User-style sheets without! Important have priority over browser style sheets
• When we have indications of the same importance within a style sheet (author, user or browser), its specificity will be calculated and ordered according to it
• When there are instructions of equal specificity within a style sheet, the one that appears last will be used