Simplify link styling using :is(), to avoid additional rule with :not().

[donquixote]

Description

Use a single rule with a:is(...) { instead of a { + a:not(...) for link styling.

Motivation & Context

In _reboot.scss we have link styling that is immediately countered by a more specific rule to undo the styling on named anchors. The :not() part was introduced in #19402 and refined in #30726.

This is awkward and can be simplified.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

(I shall review the points later)

Live previews

• https://deploy-preview-40439--twbs-bootstrap.netlify.app/

Related issues

• Placeholder links (e.g. <a>...</a>) shouldn't be styled as hyperlinks. #19402
• Since v4.4.0, dropdown-item with "active" class without href attribute have black text on hover #30726

[julien-deramond]

Thanks for this PR @donquixote
Looks promising as an enhancement of the code base, but I'm afraid we can't use it right now based on our current .browserslistrc and what's mentioned in Caniuse for :is().
However, this is something we could probably embed in v6 when we'll update this .browserslistrc with more recent browsers versions.

[donquixote]

Alright, thanks for the quick response!

I don't have any investment in this atm, I just wanted to share this idea before I forget about it.

Btw, can we use :not(:not()) in these browsers, to replace :is()?
Do you have any way to test if this would work?

[donquixote]

I pushed a version with :not(:not()), in case you want to test it.
I don't have the possibility to test it myself atm.

[julien-deramond]

I pushed a version with :not(:not()), in case you want to test it. I don't have the possibility to test it myself atm.

Thanks for that. I changed the label to v5 instead of v6.
I'll try to find some time to test it with different combinations of browsers/OSs.

[donquixote]

Btw we could use :link instead of [href].
But I wanted to keep this as close as possible to the existing code.

[julien-deramond]

Thanks for submitting this PR @donquixote

I haven't looked at the code yet, but just in terms of rendering in the deployed documentation at https://deploy-preview-40439--twbs-bootstrap.netlify.app/, there are several regressions in the homepage:

1. These links shouldn't be underlined:

2. In this button, the text should have the right color and shouldn't be underlined:

There are a lot of problems too in the side menu:

Note: tested only with macOS 14.4.1 / Firefox 126.0