Changeset 54778

Timestamp:

11/09/2022 04:28:07 PM (2 years ago)

Author:

desrosj

Message:

Themes: Re-order valid link pseudo classes.

Re-order the link pseudo classes to follow the long term LoVe (F)HA rule when set via theme.json.

In order that the CSS cascade behaves in a predictable manner, it's recommended that the selectors follow the order :visited, :focus/:hover, :active. As order affects the specificity, this ensures the interaction states override the visited states. CSS specificity is really quite beautiful, although complex.

Props mikachan, sabernhardt, davidbaumwald, mukesh27, Mamaduka, desrosj, peterwilsoncc.
Fixes #56928.

Location:

branches/6.1

Files:

• . (modified) (1 prop)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)

branches/6.1/src/wp-includes/class-wp-theme-json.php

@@ -395 +395 @@
      * Defines which pseudo selectors are enabled for which elements.
      *
+     * The order of the selectors should be: visited, hover, focus, active.
+     * This is to ensure that 'visited' has the lowest specificity
+     * and the other selectors can always overwrite it.
+     *
+     * See https://core.trac.wordpress.org/ticket/56928.
      * Note: this will affect both top-level and block-level elements.
      *
@@ -400 +405 @@
      */
     const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-        'link'   => array( ':hover', ':focus', ':active', ':visited' ),
-        'button' => array( ':hover', ':focus', ':active', ':visited' ),
+        'link'   => array( ':visited', ':hover', ':focus', ':active' ),
+        'button' => array( ':visited', ':hover', ':focus', ':active' ),
     );