Hierarchy of states

[thijs]

Hi!

I have an element with 4 states (default, hover, active/selected, added to cart).
These states control the color of the text, background and outline.
I was able to prevent conflict between the states ‘active/selected’ and ‘added to cart’ by separating what they affect (state 'active affects text color and background, while state ‘added to cart’ adds an outline).

My problem: although state ‘added to cart’ ONLY should add an outline, it also prevents the state ‘active/selected’ to apply its background.

How to I fix this issue?

Thanks,
Thijs

[Broberto]

Hi, the states work in a “lowest overwrites the ones above” kind of way. So the last one always overwrites the ones before it. It’s called cascading. You probably have this set up somewhere and you haven’t noticed. Check again.