How can I restore the initial value of outline for :focus?

css

Solution

I would suggest using `:not()` to remove the default outline from all links except the class you want.

a:not(.default-outline):focus {
    outline: none;
}

Here's a full example

Problem

The vast majority of `a`s in my application have a custom `:focus` style, and so they have `outline: none`. However, in some cases I don't have a good custom alternative, and I want to override my custom style and use the browser's default focus style. I tried using: ``` div.where-i-want-this-style a:focus { outline: initial; } ``` But this didn't give me an outline. In fact, when I remove the `outline: none;` from higher up the cascade and toggle this line, I see that this line actually causes the outline to go away. My theory is that `initial` here actually uses the initial outline of the `a`, not of a focused `a`. That value is, essentially, `none`. Is there a value I can provide that means something like `outline: default-focus-outline`?

Original source