MediumConcept

How does CSS specificity work?

Technology:
CSS
Experience:
Junior,
Mid-level
Roles:
Frontend Developer,
Full Stack Developer
Topics:
CSS Layout,
Debugging

Quick answer

Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.

Detailed explanation

Count a tuple (inline, IDs, classes, elements). #nav .item is (0, 1, 1, 0). div.card p is (0, 0, 1, 2). !important jumps the queue and should be a last resort; too many of them mean the specificity war is already lost.

A more maintainable approach is low-specificity utilities or a method such as BEM, plus CSS layers (@layer) so you can control order without stacking IDs. Attribute selectors and pseudo-classes (.btn:hover) count as classes. The universal selector * and the :where() pseudo-class add zero specificity.

Follow-up questions

Download CSS PDFMore CSS questions

Related interview questions

  • CSSEasy

    What is the CSS box model?

    Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.

    Intern 路 Junior 路 CSS Layout
  • CSSEasy

    What is the difference between inline, block and inline-block in CSS?

    Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.

    Intern 路 Junior 路 CSS Layout
  • CSSMedium

    What is the difference between Flexbox and CSS Grid?

    Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.

    Junior 路 Mid-level 路 CSS Layout

Free templates to practise with