: link - CSS-trucs | CSS Almanac 2025

De :linkselector is een pseudo-klasse die zich richt op alle niet-bezochte anchor ( ) -elementen op een pagina.

a:link ( color: aquamarine; )

Het bovenstaande voorbeeld verandert de kleur van alle niet-bezochte links naar aquamarijn.

Indien gebruikt in combinatie met de :hoverpseudo-klasse, :linkmoet deze eerst verschijnen, of anders helemaal niet gedefinieerd zijn, om de :hoverstijlen te laten werken. Dit komt omdat ze even specifiek zijn, dus als ze :linkdaarna zouden komen, zouden die stijlen de hover-stijlen overschrijven.

De :linkpseudo-class zal zich richten op alle elementen die een hrefattribuut hebben, zelfs als de hrefeen lege waarde heeft. Dus in die zin is het als de attribuutselector (href).

Dit betekent dat de volgende drie HTML-elementen allemaal kunnen worden gestileerd via de :linkpseudo-klasse:

CSS-Tricks CSS-Tricks CSS-Tricks

Het derde voorbeeld in het bovenstaande codeblok zou echter ongeldige HTML zijn.

Er zijn slechts drie HTML elementen die het accepteren hrefattribuut: , , en . Alleen het element kan worden gestileerd via de :linkpseudo-class.

U kunt het hrefattribuut ook niet aan een ander type element toevoegen en het stijlbaar maken via :link. Met andere woorden, als u de volgende HTML had:

 CSS-Tricks

De volgende CSS zou geen effect hebben:

div:link ( color: aquamarine; )

Nogmaals, de HTML zou de validatie mislukken, aangezien het hrefgeen geldig attribuut is voor .

Vanwege het feit dat :linkalleen elementen :linkkunnen worden getarget , kunnen stijlen als volgt in de CSS worden gedefinieerd zonder de elementtype-selector:

:link ( color: aquamarine; )

Voor alle praktische doeleinden bij het gebruik van HTML is de :linkpseudo-klasse ook enigszins irrelevant, aangezien hetzelfde effect kan worden bereikt door eenvoudig alle elementen rechtstreeks te targeten :

a ( color: aquamarine; )

Als er echter elementen op de pagina zijn waarvoor het hrefattribuut niet is ingesteld (bijvoorbeeld op oude pagina's die werden gebruikt ), zou de bovenstaande code ook op die elementen zijn gericht, en dit is misschien niet het gewenste resultaat.

Er moet ook worden opgemerkt dat, te beginnen met CSS2, andere documenttalen (naast HTML) andere elementen kunnen definiëren, naast ankers, die kunnen worden gestileerd via de :linkpseudo-klasse.