If an element is in several states (:hover, :focus, :active), and it contains a set of attributes for each of these states (Element.mouseOver, Element.focused, Element.mouseDown), then one of the conflicting states will be selected randomly.
Steps to reproduce
Several elements are defined in the markup.
Elements use several identical pseudo-classes, for example, Element.mouseOver and Element.mouseDown.
Within the element, pseudo-classes are defined in different order.
Pairs of identical pseudo-classes affect the same attributes with the same values.
The elements will have 100% identical CSS classes, but they will be written to the intermediate stylesheet in a different order, and at the end, duplicates will also be removed. If several conflicting events occur (:hover, :focus, :active) according to CSS rules, the selector defined later will be applied.
Expected behavior
Ideal scenario: each element gets a set of unique classes that are applied in the order they are listed in the attribute list.
Alternative scenario: the order of application of pseudo-classes is strictly fixed (:hover < :focus < :active).
XOMAv2
commented
1 year ago
Bug!
If an element is in several states (
:hover,:focus,:active), and it contains a set of attributes for each of these states (Element.mouseOver,Element.focused,Element.mouseDown), then one of the conflicting states will be selected randomly.Steps to reproduce
Element.mouseOverandElement.mouseDown.Ellie example
Causes of the bug
The elements will have 100% identical CSS classes, but they will be written to the intermediate stylesheet in a different order, and at the end, duplicates will also be removed. If several conflicting events occur (
:hover,:focus,:active) according to CSS rules, the selector defined later will be applied.Expected behavior
Ideal scenario: each element gets a set of unique classes that are applied in the order they are listed in the attribute list. Alternative scenario: the order of application of pseudo-classes is strictly fixed (
:hover<:focus<:active).Versions