Calculate Specificity
Understanding CSS Specificity
Specificity determines which CSS rule applies when multiple rules target the same element.
It's calculated as a tuple: (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements).
Specificity weights
| Selector Type | Weight | Examples |
|---|---|---|
| Inline styles | 1,0,0,0 |
style="..." |
| ID selectors | 0,1,0,0 |
#header, #main |
| Classes, attributes, pseudo-classes | 0,0,1,0 |
.btn, [type], :hover |
| Elements, pseudo-elements | 0,0,0,1 |
div, p, ::before |
| Universal, combinators | 0,0,0,0 |
*, >, +, ~ |
How comparison works
Compare from left to right. The first higher number wins:
#id(0,1,0,0) beats.class.class.class(0,0,3,0).class(0,0,1,0) beatsdiv div div(0,0,0,3)- When equal, the last rule in CSS wins
!importantoverrides specificity (use sparingly!)
Frequently Asked Questions
How is CSS specificity calculated?
CSS specificity is calculated as a four-part tuple: (inline styles, ID selectors, classes/attributes/pseudo-classes, elements/pseudo-elements). Count the occurrences of each type in a selector, then compare tuples from left to right. The first column with a higher number wins.
Does one ID beat multiple classes?
Yes. Specificity columns are compared independently, not summed. One ID selector (0,1,0,0) always beats any number of class selectors (0,0,n,0), because the ID column is evaluated before the class column.
Why is my CSS not applying?
The most common cause is a specificity conflict — another rule with higher specificity is overriding yours.
Open browser DevTools, inspect the element, and check the Styles panel. Overridden properties appear crossed out.
Also check for !important declarations and inline styles, which take priority over selector-based rules.
Does !important override specificity?
!important is resolved on a separate layer above normal specificity. A declaration with !important always beats normal declarations regardless of selector weight.
Among multiple !important declarations, normal specificity rules apply to decide the winner.
What specificity does the universal selector (*) have?
The universal selector has a specificity of 0,0,0,0. Combinators (>, +, ~, and the descendant space) also contribute zero specificity.
What is the difference between :is() and :where()?
Both accept a selector list and match the same elements. The difference is specificity: :is() takes the specificity of its most specific argument, while :where() always has zero specificity.
Use :where() for default styles that should be easy to override.
What happens when two selectors have the same specificity?
When specificity is identical, the rule that appears last in the CSS source wins. This is the "source order" tiebreaker — the final step of the CSS cascade.
Do inline styles always win?
Inline styles (style="...") have a specificity of 1,0,0,0, which beats any selector-based rule. The only way to override an inline style from a stylesheet is with !important.
Want to learn more? Read the full guide: CSS Specificity Explained: How Browsers Decide Which Styles Win
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are computed locally and should be verified for critical applications.
Related Tools
- Subnet Calculator -- Calculate subnet details from IP and mask
- HSL to RGB Converter -- Convert HSL colors to RGB and hex codes
- QR Code Scanner -- Scan and decode QR codes from uploaded images
- CSV Editor -- Edit, sort, filter, and export CSV data in a spreadsheet view
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
CSS Specificity Calculator FAQ
How is CSS specificity calculated?
CSS specificity is calculated as a four-part tuple: (inline styles, ID selectors, classes/attributes/pseudo-classes, elements/pseudo-elements). Count the occurrences of each type in a selector, then compare from left to right. The first column with a higher number wins.
Does one ID beat multiple classes?
Yes. Specificity columns are compared independently. One ID selector (0,1,0,0) always beats any number of class selectors (0,0,n,0), because the ID column is compared before the class column.
Why is my CSS not applying?
The most common reason is a specificity conflict. Another CSS rule with higher specificity is overriding your styles. Open your browser DevTools, inspect the element, and check the Styles panel to see which rule is winning. Overridden properties will appear crossed out.
Does !important override specificity?
!important is resolved on a separate layer above normal specificity. A declaration with !important always beats normal declarations regardless of selector weight. Among multiple !important declarations, normal specificity rules apply to determine the winner.
What specificity does the universal selector (*) have?
The universal selector (*) has a specificity of 0,0,0,0. Combinators (>, +, ~, and the descendant space) also contribute zero specificity. Any other selector overrides them.
What is the difference between :is() and :where() for specificity?
:is() takes the specificity of its most specific argument. :where() always has zero specificity. Both match the same elements, but :where() is useful for writing default styles that are easy to override.