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

Issue

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 {...}

Solution

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) { ... }

Answered By - Linmic