De :any-linkpseudo-klasse in CSS biedt een methode om elementen te selecteren die het bronanker van een hyperlink zijn.
Als de term bronanker je kwijt is geraakt, is dat een mooie naam voor het href attribuut op de HTML-elementen , en . (Waarom je een of in CSS zou moeten targeten, is mij een raadsel, maar hey.) De HTML-specificatie heeft daar veel meer informatie over.
Een element dat een hrefattribuut accepteert en bevat, is een hyperlink en wordt geselecteerd met :any-link. Dit wordt een handige manier om alle op links gebaseerde HTML-elementen te selecteren die anders misschien niet gerelateerd lijken te zijn en zonder de opmaak aan te raken. Misschien bestaat het omdat je zou denken :linkdat het alle links zou selecteren, maar het mist :visited, dus dit sluit ze allemaal samen.
Functioneel gezien is het net als de attribuutselector (href).
Howdy!:any-link ( color: red; font-weight: 900; text-decoration: none; )Het is vermeldenswaard dat we ook dezelfde HTML-elementen kunnen selecteren met behulp van de :matches()pseudo-class. :matches(:link, :visited)Selecteert bijvoorbeeld dezelfde elementen als :any-link.
Een ander ding om op te merken is dat de specificatie momenteel om alternatieve naamsuggesties voor deze selector vraagt op het moment van schrijven. Hoewel het onduidelijk is of de naam zal veranderen, werd de :matches()pseudo-klasse voorheen genoemd, :any()wat een indicatie zou kunnen zijn.
Browser-ondersteuning
Het :any-linkpseudo-element wordt beschouwd als een experimentele functie en maakt deel uit van de Selectors Level 4-specificatie, die zich momenteel in de conceptstatus bevindt.
Voor volledige ondersteuning zou je het als voorvoegsel willen gebruiken:
:-webkit-any-link ( ) :-moz-any-link ( ) :any-link ( )En vergeet niet om die selectors niet door komma's te scheiden om ze te combineren, aangezien browsers selectors gooien met onderdelen die ze niet begrijpen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 15 * | 3 * | Nee | 79 | 6.1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |
Verwant
:link:matches():visited
Meer informatie
- Selectors Level 4 Specification (Working Draft)
- Mozilla-documentatie