CODEWITHSUNDEEP
csscss-selectorspseudo-class
Rina_Gorsha
Rina_Gorsha

Reputation: 143

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

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

Upvotes: 14

Views: 30347

Answers (2)

Linmic
Linmic

Reputation: 791

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 :is()(was :matches, now renamed to :is():

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

Upvotes: 13

BoltClock
BoltClock

Reputation: 723538

: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.

Upvotes: 4

Related Questions