Specificity

Simultaneously many overshadowing style rules can be associated with the same element arising out of style declarations regarding the same element due to:

• the inclusion of those style declarations in inline, internal and external CSS, or

• the element being selected by more than one selector at the same time (which is almost always the case).

Specificity is a set of principles that govern which of overshadowing style rules associated with a given element are ultimately applied for actual styling process.

The principles of specificity are quite intricate and their final result is indicated by four numbers (from the most important to the least important) separated by commas. For the sake of simplifying, it could be outlined that the hierarchy of specificity is as follows:

• inline CSS,

• id selectors,

• chained class & pseudo-class selectors,

• class selectors,

• combined selectors,

• tag selectors.

Style rules declared using inline CSS have the specificity of 1,0,0,0.

The outcome specificity for style rules associated with given selectors is as follows:

• an id selector (e.g. #foo) - 0,1,0,0,

• a class selector chained with another class selector (e.g. .foo.bar) - 0,0,2,0,

• a tag selector chained with a class selector (e.g. p.foo) - 0,0,1,1,

• a class selector (e.g. .foo) - 0,0,1,0,

• a combined two tag selector (e.g. div p) - 0,0,0,2,

• a tag selector (e.g. p) - 0,0,0,1.