Specificity Calculation: Inline Style ID Class Element
Calculate specificity scores and predict which rule wins any style conflict.
Specificity Calculation: Inline Style ID Class Element is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is Specificity?
Specificity determines which CSS rule wins when multiple rules target the same element and property. It is calculated as a 4-part score: (A, B, C, D) where A is the highest and D the lowest.
Specificity Components
The four columns:
- A: Inline styles (style="" attribute) = 1,0,0,0
- B: ID selectors (#id) = 0,1,0,0
- C: Class selectors (.class), attribute selectors, pseudo-classes = 0,0,1,0
- D: Type (element) selectors, pseudo-elements = 0,0,0,1
Specificity Examples
Calculating specificity:
/* (0,0,0,1) — one element */
p { }
/* (0,0,1,0) — one class */
.card { }
/* (0,1,0,0) — one ID */
#header { }
/* (0,0,1,1) — one class + one element */
p.intro { }
/* (0,1,1,0) — one ID + one class */
#header .logo { }
/* (0,0,2,1) — two classes + one element */
.nav .nav-link.active { }Universal Selector Has No Specificity
The universal selector *, combinators (+, >, ~, space), and the :where() pseudo-class all contribute zero (0,0,0,0) to specificity.
Inline Styles Win
Inline styles (style="" attribute) have the highest specificity (1,0,0,0). Only !important can override them from a stylesheet rule.
Comparing Specificity Scores
Compare from left to right. The first column where scores differ determines the winner. (0,1,0,0) beats (0,0,99,99) because the ID column wins immediately.
:is() :not() and :has() Specificity
:is(), :not(), and :has() take the specificity of their most specific argument:
:is(#header, .nav) { } /* (0,1,0,0) — due to #header */
:not(.active) { } /* (0,1,0,0) — .active is class-level */
:where(.p) { } /* (0,0,0,0) — always zero */nth-child Specificity
:nth-child(), :first-child, :hover, and other pseudo-classes all add (0,0,1,0) — class-level specificity.
Pseudo-element Specificity
::before, ::after, ::first-line, etc. add (0,0,0,1) — element-level specificity. They are in the D column.
Specificity is Not Inheritance
Specificity is calculated per-property per-element. A rule with higher specificity wins for a given property — but inherited values from a parent with high specificity do not beat more-specific direct rules on the child.
Specificity Calculator Tools
Use online tools like specificity.keegan.st or browser DevTools to verify specificity. In DevTools, crossed-out styles in the Styles panel indicate that a more specific rule won.
Quick Check
Which selector has higher specificity: #sidebar .link or .nav .nav-item .nav-link.active?
Recap
Specificity scores are (A, B, C, D): inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements. Compare left to right — the first differing column wins. :where() always contributes zero. One ID beats any number of class selectors. Use DevTools's Styles panel to see which rules win and why.
Frequently asked questions
Is the “Specificity Calculation: Inline Style ID Class Element” lesson free?
Yes — the full text of “Specificity Calculation: Inline Style ID Class Element” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Specificity Calculation: Inline Style ID Class Element”?
Calculate specificity scores and predict which rule wins any style conflict. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Specificity Calculation: Inline Style ID Class Element” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Specificity Calculation: Inline Style ID Class Element
- The Cascade: Origin and Order
- !important: When and Why Not
- Inheritance and the all Property