A third-party widget sets its background colour through the style attribute on the element. Why can't a more specific CSS selector override it, and what can?

## Why specificity has nothing to say here Specificity is computed from selector text: count the IDs, the classes, the types. A declaration written in an element's `style` attribute has no selector, so there is nothing to count. It is not a very high specificity — it has none. Instead, the cascade gives style-attribute declarations their own rank. When it sorts competing declarations, it puts normal declarations from the `style` attribute above every normal declaration that came from a stylesheet, regardless of how those stylesheet rules were written. `#page #main #widget.widget.widget` and `.widget` lose to the inline value in exactly the same way, for exactly the same reason: they lost at an earlier step and their triples were never compared. This is the practical answer to "my override doesn't work and I've already added three IDs". Adding a fourth changes nothing. Once you see the value shown as an element style rather than as a matched rule, specificity is no longer the lever. ## The lever that does work Importance is compared before specificity. A declaration marked `!important` in your stylesheet outranks a normal declaration from the `style` attribute: ```css .widget { background-color: #fff !important; } ``` ```html <div class="widget" style="background-color: #c00">…</div> ``` The white background wins. Note what this is *not*: `!important` did not raise the rule's specificity. Specificity is unchanged at `0-1-0`; the declaration simply won a step that happens earlier. If a second important declaration in your stylesheet also targets the element, then specificity comes back into play to choose between the two important ones. ## Where the escape hatch stops working If the inline declaration is itself important — `style="background-color: #c00 !important"`, or set from script with a priority argument — an author stylesheet has nothing left. Important inline declarations outrank important stylesheet declarations, and there is no author-origin construct above them. At that point the fix is not CSS at all: change the markup, configure the widget so it stops writing the style, or remove the property from the element after the widget runs. ## Why this shows up so often Inline styles are what libraries write when they need a computed value — a measured height, a positioned popover offset, a theme colour pulled from a config object. They are legitimate for genuinely dynamic values and hostile to theming, because they sit above the entire stylesheet by construction. That is also why an `!important` in your own stylesheet is a reasonable, bounded response to *someone else's* inline style, and a much worse idea inside your own codebase, where it starts an escalation your future overrides have to match. ## How to reason about it on the spot When a value refuses to change, first classify where the winning declaration came from: 1. **From a stylesheet rule** — then specificity or source order is the story, and you can win by scoring higher or by ordering later. 2. **From the `style` attribute** — then specificity is irrelevant, and your options are `!important` or removing the inline declaration. 3. **From an important inline declaration** — then the author origin has run out of moves and the fix belongs in the markup or the script. Making that classification explicit is what an interviewer is listening for. The weak answer keeps reaching for more selectors; the strong one names the step of the cascade that decided the outcome, and only then picks a tool. ## A note on what you should *prefer* Winning is not the same as being right. Reaching for `!important` against a widget you do not control is defensible; reaching for it because your own two rules collide means the collision is the bug. And an important declaration you add today is a constraint on every override written after it, since the only thing that beats an important author declaration is another important author declaration with a higher-scoring selector.