AES Encryption Explained: How It Works and Why It Matters
Jun 23, 2026
CSS Specificity Calculator
Calculate, compare, and understand CSS selector specificity.
- Home
- Web Dev
- CSS Specificity Calculator
Specificity Breakdown
0
Inline
( class="page_speed_6" )
0
ID
( #id )
0
Class / Attribute
( .class, [attr] )
0
Element
( div, ::before )
Selector Visualization
What is CSS Specificity?
CSS specificity determines which styles are applied when multiple rules target the same element. It is calculated as a four-part weight:
| Category | Examples | Weight |
|---|---|---|
| Inline styles | class="page_speed_7" | 1, 0, 0, 0 |
| ID selectors | #header, #main-content | 0, 1, 0, 0 |
| Class, attribute & pseudo-class | .container, [type="text"], :hover | 0, 0, 1, 0 |
| Elements & pseudo-elements | div, h1, ::before, :first-line | 0, 0, 0, 1 |
The !important declaration overrides all specificity calculations and should be used sparingly.
How to Use
- Enter a CSS selector — Type any CSS selector in the input field. Click Examples to try predefined selectors.
- Calculate — Click Calculate Specificity to see the breakdown of inline, ID, class/attribute, and element counts.
- Compare — Optionally enter a second selector to compare which one has higher specificity.
- Visualize — View a color-coded breakdown showing which parts contribute to each specificity category.
Frequently Asked Questions
Why does specificity matter?
Understanding specificity helps you debug CSS conflicts and write more maintainable stylesheets. When two selectors target the same element, the one with higher specificity wins.
How is the total score calculated?
The score combines all four categories: (inline x 1000) + (ID x 100) + (class/attribute x 10) + (element x 1). This gives you a quick numerical comparison.
Does :not() affect specificity?
Yes. The :not() pseudo-class itself does not add specificity, but the selector inside the parentheses does. For example, :not(#id) contributes an ID-level specificity.
Related CSS Tools
Blog
Latest from Our Blog
CSS Gradient Generator: Create Stunning Gradients for Your Website
Jun 23, 2026
Diff Checker: How to Compare Text and Files Effectively
Jun 23, 2026
JSON Validation: How to Validate and Fix JSON Data
Jun 23, 2026
Regex Testing: How to Test and Debug Regular Expressions
Jun 23, 2026
SSL Certificate Checker: How to Verify SSL/TLS Certificates Online
Jun 23, 2026