How make :focus, :active be the same as :hover

Question

Is there any simple way make :focus & :active behave as :hover?

Usually i write:

.class a:hover, .class a:active, .class a:focus {...}

But i would like to write just a single :hover rule and :focus & :active will look the same

.class a:hover {...}

Answer 1

There is currently no better way to do so in CSS2/3.

However, you might want to use cssnext to use the @custom-selectors and :matches() syntax today.

With @custom-selectors:

@custom-selector: --enter :hover, :focus, :active;

a:--enter { ... }

With :matches():

a:matches(:hover, :focus, :active) { ... }

Answer 2

:hover, :active and :focus exist as three separate pseudo-classes for a reason. An element that matches one of these pseudo-classes isn't automatically going to match the other two (even though they're not mutually exclusive, i.e. an element can match two or three of them at the same time).

It's not possible to force an element to match a dynamic pseudo-class either through CSS or programmatically. If you want to apply styles to elements in all three of these states, you will have to specify them.

Selectors 4's :matches() will alleviate the repetitiveness:

.class a:matches(:hover, :active, :focus)

but it is currently not implemented unprefixed anywhere just yet.