Apply states in LVHA order (hover then active)

[johnsicili]

I want active styles to have a higher specificity than hover. This way I can apply lets say scale on :hover and :active, press the button, and the button to change. Currently no change happens because :hover scale is overriding :active scale.

MDN

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

[kof]

Can you show an example of this where it makes sense?

[johnsicili]

When adding the same property to both active and hover, active won't ever show like this:

hoveractive.mp4

Summary: link has scale big on hover and scale small on active. There is no indication the link is active though.

[kof]

I am not sure there is a common consensus what should be applied in this case, in css it's just whatever wins depending on specificity. Maybe we should be able to do it depending on what was defined last ... which is still very implicit.

I think we are missing important UI where this can be made visible. What's WF's take on this?

[johnsicili]

Can you show an example of where it makes sense to have :hover > :active?

[kof]

Honestly haven't thought about it, but my first reaction is that when I hover something, I should be able to see the effect, even if element is already active. I might be wrong.

[kof]

alright, lets do this, because figuring out customization for this is right now too complex and this order makes sense:

1. link/visited
2. hover
3. focus
4. active