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

  • Speci­ficity allows browsers to decide which CSS prop­erty val­ues are the most rel­e­vant to an ele­ment and, there­fore, will be applied.

  • Speci­ficity only applies when the same ele­ment is tar­geted by mul­ti­ple declarations.

Here, we will walk through speci­ficity step by step.


In this exam­ple, as there is one css selec­tor. So, browser can not apply specificity.

See the Pen specificity-1 by Kavit Shah (@kavitshah8) on Code­Pen.


Here, we have two css selec­tors which tar­gets the same ele­ment. But the css selec­tor with the id has higher speci­ficity. Hence, the "color : red" will be applied.

See the Pen specificity-2 by Kavit Shah (@kavitshah8) on Code­Pen.


Inline styles always have the higher pri­or­ity than the exter­nal style sheet. Hence, the "color: green" will be applied. You can override

See the Pen specificity-3 by Kavit Shah (@kavitshah8) on Code­Pen.


One can over­ride the inline styles with the !important flag in the exter­nal style sheet. Hence, the "color : red" will be applied.

See the Pen specificity-4 by Kavit Shah (@kavitshah8) on Code­Pen.



You may also like...