Specificity in CSS

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.

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.