The priority of pseudo-classes is set. mdgriffith#352

examples/Pseudo.elm

@@ -0,0 +1,31 @@
+module Pseudo exposing (..)
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+
+
+main =
+    Element.layout
+        [ Background.color (rgba 0 0 0 1)
+        , Font.color (rgba 1 1 1 1)
+        , Font.italic
+        , Font.size 32
+        , Font.family
+            [ Font.sansSerif ]
+        ]
+    <|
+        column [ centerX, centerY ]
+            [ el
+                [ mouseOver [ Background.color <| rgb255 255 0 0 ]
+                , mouseDown [ Background.color <| rgb255 0 0 255 ]
+                ]
+              <|
+                text "The following priority of pseudo classes is fixed"
+            , el
+                [ mouseDown [ Background.color <| rgb255 0 0 255 ]
+                , mouseOver [ Background.color <| rgb255 255 0 0 ]
+                ]
+              <|
+                text "hover < focused < active"
+            ]

src/Internal/Model.elm

@@ -2622,7 +2622,21 @@ toStyleSheetString options stylesheet =
     in
     case List.foldl combine { topLevel = [], rules = [] } stylesheet of
         { topLevel, rules } ->
-            renderTopLevelValues topLevel ++ String.concat rules
+            let
+                ruleWeight s =
+                    if String.contains ":hover" s then
+                        1
+
+                    else if String.contains ":focus" s then
+                        2
+
+                    else if String.contains ":active" s then
+                        3
+
+                    else
+                        0
+            in
+            renderTopLevelValues topLevel ++ String.concat (List.sortBy ruleWeight rules)
 
 
 renderStyle : OptionRecord -> Maybe PseudoClass -> String -> List Property -> List String