Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

css specificity interview question

  • Specificity allows browsers to decide which CSS property values are the most relevant to an element and, therefore, will be applied.

  • Specificity only applies when the same element is targeted by multiple declarations.

  • Inline Styles > ID Selectors > Classes, Pseudo Elements > Attributes > Elements > Inheritance

Here, we will walk through specificity step by step.


In this example, as there is one css selector. So, browser can not apply specificity.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PGEyvA” default_tab=”html,result” user=”kavitshah8″]See the Pen specificity-1 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]


Here, we have two css selectors which targets the same element. But the css selector with the id has higher specificity. Hence, the "color : red" will be applied.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”Egodqo” default_tab=”css,result” user=”kavitshah8″]See the Pen specificity-2 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]


Inline styles always have the higher priority than the external style sheet. Hence, the "color: green" will be applied. You can override

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”kkvQNy” default_tab=”html,result” user=”kavitshah8″]See the Pen specificity-3 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]


One can override the inline styles with the !important flag in the external style sheet. Hence, the "color : red" will be applied.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gwoQbV” default_tab=”html,result” user=”kavitshah8″]See the Pen specificity-4 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]



You may also like...