Make WordPress Core

Opened 2 years ago

Last modified 21 months ago

#55281 new enhancement

Twenty Twenty-One: Consider decreasing the selector specificity

Reported by: orkunaybek's profile orkunaybek Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: css Cc:

Description (last modified by sabernhardt)

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?

Attachments (2)

selector.png (266.1 KB) - added by orkunaybek 2 years ago.
effect.png (645.0 KB) - added by orkunaybek 2 years ago.

Download all attachments as: .zip

Change History (3)

@orkunaybek
2 years ago

@orkunaybek
2 years ago

#1 @sabernhardt
21 months ago

  • Description modified (diff)
  • Summary changed from Twenty Twenty One Theme: Consider decreasing the selector specificity to Twenty Twenty-One: Consider decreasing the selector specificity
  • Version changed from 5.9.1 to 5.6

Hi and welcome to Trac!

It's technically a set of selectors in 04-elements/links.scss, and each starts with:

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

Note: See TracTickets for help on using tickets.