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.
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.
If hierarchy is important, would you agree that then it’s also relevant to be able to change the order of states? The only option I see now is to remove states and remake them in the right order. If you agree, I suppose I’ll make a feature request.
