Suggest an editImprove this articleRefine the answer for “How is specificity calculated? What does the specificity formula look like?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**A selector's specificity** is calculated as a numeric "weight" in the format `[a, b, c, d]`, where `a` is inline styles, `b` is ID selectors, `c` is classes and pseudo-classes, and `d` is tags and pseudo-elements. **Key point:** the digits are compared left to right, and `!important` and the universal selector `*` are not part of this formula.Shown above the full answer for quick recall.Answer (EN)ImageSpecificity is calculated as a **numeric "weight" of the selector**, made up of four digits. The browser builds the number using the formula: ```javascript [a, b, c, d] ``` Where: | Digit | What it counts | Examples | |---|---|---| | **a** | inline styles | `style=""` | | **b** | ID selectors | `#header` | | **c** | classes, attributes, pseudo-classes | `.box`, `[type="text"]`, `:hover` | | **d** | tag selectors and pseudo-elements | `div`, `p`, `::after` | --- ### **How it's calculated** The selector is broken down into parts, and each part increases one of the digits. For example: | Selector | Specificity | |---|---| | `div` | 0,0,0,1 | | `.text` | 0,0,1,0 | | `#main` | 0,1,0,0 | | `header .menu li` | 0,0,1,2 *(1 class + 2 tags)* | | `#main .menu li` | 0,1,1,1 | | `style="color:red"` | 1,0,0,0 | --- ### **How they're compared** The comparison goes digit by digit, from left to right: 1. first `a` (inline) is compared 2. if equal, `b` (id) 3. if equal, `c` (classes) 4. if equal, `d` (tags) The rule with the higher number in the first digit that differs is the one that applies. --- ### **Important exceptions** - `!important` does not take part in the formula, but **overrides everything** except another `!important` - `*` (the universal selector) **adds no weight** - combinators (`>`, `+`, `~`, a space) also do not affect the weight --- ### **Summary of the formula** **Specificity =** `[a, b, c, d]`, where: - `a`: inline - `b`: ID - `c`: classes, attributes, pseudo-classes - `d`: tags and pseudo-elements This formula determines which rule wins when styles conflict.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.