How can I "undo" outline:none; without deleting the rule?

Question

I'm working with a WordPress theme that has applied outline:none; to several elements for their :focus state. I need to negate this without modifying the parent-theme files, but nothing seems to be working.

Here's what I've tried:

*:focus { outline: inherit !important; }
*:focus { outline: initial !important; }
a, a:focus { outline: inherit !important; }
a, a:focus { outline: initial !important; }

I really want to just reset it to defaults, but the only thing that's had any result so far is:

*:focus { border: 3px solid red !important; }

But I really don't want to manually set the styles, just let the browsers do their thing.

Answer 1

I agree with @soulshined's comment about using a class instead, but the value you're looking for is auto.

Snippet (manually focus it in developer tools)

a:focus {
  outline: 0;
}

#withOutline:focus {
  outline: auto;
}

<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a id="withOutline" href="javascript:void(0)">A bunch of text</a>