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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>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:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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