Why doesn't ":focus:not(:active)" pseudo-class work?

Question

I'm trying to figure out if there's a way to allow for prevent the styling of the ":focus" pseudo-class from being applying when there is a ":focus:active" or click event without the use of jQuery/JS. As the ":active" state is dependent on the ":focus" state, I would presume that ":focus:not(:active)" work, but it does not. Is there any way to combine ":not" with ":focus" to prevent "focus:active" from triggering "focus"?

Answer 1

:not(:focus) is the closest you can get in CSS

Answer 2

You can juste use :focus-visible this selector only triggers on focus not on active.