CSS :link-Pseudoklasse
Die :link-Pseudoklasse wird verwendet, um unbesuchte Links auf einer Seite auszuwählen und zu stylen. Sie gilt für Links, die noch nicht besucht wurden.
Die Pseudoklassen :link und :visited schließen sich gegenseitig aus. Ein Link ist entweder unbesucht (:link) oder besucht (:visited).
Die Pseudoklassen :visited, :hover und :active überschreiben den Stil, der durch die :link-Pseudoklasse definiert wurde. Um Links korrekt zu stylen, sollte die :link-Regel vor allen anderen linkbezogenen Regeln (:visited, :hover, :active) platziert werden.
INFO
Die :link-Pseudoklasse trifft auf jedes unbesuchte <a>, <area> oder <link> Element zu, das ein href-Attribut besitzt.
In vielen Fällen ist :link überflüssig, da unbesuchte Links den Standardstil darstellen.
Version
Syntax
CSS :link-Syntax
:link {
css declarations;
}Beispiel für den :link-Selektor:
CSS :link-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<a href="https://www.w3docs.com">w3docs</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>Beispiel für den :link-Selektor mit dem <p>-Tag:
CSS :link weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #ccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>Visit our
<a href="https://www.w3docs.com/">website</a>.
</p>
</body>
</html>In diesem Beispiel fahren Sie mit der Maus über die Links und beobachten Sie, wie sie sich ändern:
Beispiel für die :link-Pseudoklasse mit :hover und :visited:
CSS :link-Hover-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
display: block;
padding: 5px 0 10px;
font-weight: bold;
}
a.one:link {
color: #ccc;
}
a.one:visited {
color: #095484;
}
a.one:hover {
color: #8ebf42;
}
a.two:link {
color: #ccc;
}
a.two:visited {
color: #095484;
}
a.two:hover {
font-size: 150%;
}
a.three:link {
color: #ccc;
}
a.three:visited {
color: #095484;
}
a.three:hover {
background: #8ebf42;
}
a.four:link {
color: #ccc;
}
a.four:visited {
color: #095484;
}
a.four:hover {
font-family: monospace;
}
a.five:link {
color: #095484;
text-decoration: none;
}
a.five:visited {
color: #095484;
text-decoration: none;
}
a.five:hover {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>
<a class="one" href="#">This link changes color</a>
<a class="two" href="#">This link changes font-size</a>
<a class="three" href="#">This link changes background-color</a>
<a class="four" href="#">This link changes font-family</a>
<a class="five" href="#">This link changes text-decoration</a>
</p>
</body>
</html>Praxis
Welche verschiedenen Link-Zustände können in CSS gestylt werden?