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

Issue

The vast majority of as 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?

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

Answered By - Kevin Jantzer