[wp-trac] [WordPress Trac] #55281: Twenty Twenty-One: Consider decreasing the selector specificity (was: Twenty Twenty One Theme: Consider decreasing the selector specificity)

[WordPress Trac]

#55281: Twenty Twenty-One: Consider decreasing the selector specificity
-----------------------------------------+------------------------------
 Reporter:  orkunaybek                   |       Owner:  (none)
     Type:  enhancement                  |      Status:  new
 Priority:  normal                       |   Milestone:  Awaiting Review
Component:  Bundled Theme                |     Version:  5.6
 Severity:  normal                       |  Resolution:
 Keywords:  has-screenshots needs-patch  |     Focuses:  css
-----------------------------------------+------------------------------
Changes (by sabernhardt):

 * version:  5.9.1 => 5.6


Old description:

> There is a css selector that selects almost any a tags and applies white
> background on focus. This forces users to use at least 4 classes on
> elements to override by specificity and complicate the code. You can see
> mentioned selector and how it overrides the focus color of a button with
> 3 classes already in attached screenshots. Why such strong selector is
> used there, is it really necessary, can we remove it or decrease the
> specificity?

New description:

 There is a CSS selector that selects almost any `a` tags and applies white
 background on focus. This forces users to use at least 4 classes on
 elements to override by specificity and complicate the code. You can see
 mentioned selector and how it overrides the focus color of a button with 3
 classes already in attached screenshots. Why such strong selector is used
 there, is it really necessary, can we remove it or decrease the
 specificity?

--

Comment:

 Hi and welcome to Trac!

 It's technically a set of selectors in
 [https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentytwentyone/assets/sass/04-elements/links.scss?rev=50423#L18
 04-elements/links.scss], and each starts with:

 `.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button)`

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55281#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform