CSS Selector Specificity
Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.
Description
CSS specificity orders selector weight by ID, class-like and type-like counts.
When to use CSS Selector Specificity
Use this tool to calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.
Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
How to use CSS Selector Specificity and understand its results
- Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
- Enter selectors using the field table and calculation rules, then run the tool.
- Read selectors. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| selectors | Comma-separated selector list without CSS nesting ampersands. | string; maximum length: 1000000 | Required |
Paste a nonempty comma-separated selector list. Split at top level, respecting brackets/quotes; count IDs, classes/attributes/pseudo-classes and types/pseudo-elements. :where adds zero; :is/:not/:has add maximum argument specificity; nth-child of adds its pseudo-class plus maximum selector weight. :host/:host-context/::slotted also add argument weight. Return each trimmed selector/triple.3
specificity=(IDs,classes,types), compared lexicographically Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| selectors | Selector-specific ID, class, and type counts. | list of object; minimum entries: 0; maximum entries: 100000 |
| selectors[].selector | Field in selectors record | string; maximum length: 1000000 |
| selectors[].specificity | Field in selectors record | object |
{
"input": {
"selectors": "#app .card > a:hover, :where(#zero) :is(p, #chosen)"
},
"output": {
"selectors": [
{
"selector": "#app .card > a:hover",
"specificity": {
"ids": 1,
"classes": 2,
"types": 1
}
},
{
"selector": ":where(#zero) :is(p, #chosen)",
"specificity": {
"ids": 1,
"classes": 0,
"types": 0
}
}
]
}
}Limitations and assumptions
Nesting ampersands, unbalanced syntax and recursion beyond 100 levels are rejected. This is a lexical counter, not full selector validation, DOM matching or cascade evaluation; comments are not stripped.
Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use CSS Media Query Extractor: Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions. For a complementary task, use CSS Box Shadow Parser: Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.
Further background: Selectors Level 4: Specificity.
References
-
CSS Selector Specificity — tool.io
-
Selectors Level 4: Specificity — World Wide Web Consortium
-
CSS Custom Property Parser — tool.io
Similar or alternative tools
- CSS Media Query Extractor
Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.
- CSS Box Shadow Parser
Parse box-shadow lists with literal CSS lengths and one color token, preserving units and rejecting unsupported calculated lengths.