Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:link

[CSS Selector] E:link

Using selector:link, you can apply styles to elements that have a link destination. Since it applies to elements with a link target, it is mainly used with the a element. This is commonly called a "pseudo-class" (the :link pseudo-class).

Be aware that this rule can be overridden by other pseudo-classes, so the order of declarations matters. Writing them in the order ':link', ':visited', ':hover', ':active' (the "LVHA" order) prevents conflicts.

Sample Code

style.css

/* color for unvisited links */
a:link { color: red;}

/* LVHA order (recommended): link → visited → hover → active */
a:link { color: #3498db; text-decoration: underline;}
a:visited { color: #8e44ad;}
a:hover { color: #2980b9; text-decoration: none;}
a:active { color: #e74c3c;}

/* navigation menu link styles */
nav a:link { color: #fff; text-decoration: none; padding: 8px 16px;}
nav a:visited { color: rgba(255,255,255,0.7);}
nav a:hover { background-color: rgba(255,255,255,0.2);}

In practice, you can think of this as applying to any a element that has an 'href' attribute.

Browser Display Result

※ To test the sample below, please clear your browser's browsing history first.

a:link { color: red;} /* Makes the text of a elements with a link destination red. */

<p><a target="_blank" href="https://www.google.co.jp/">Goes to Google's page.</a></p>
<p><a>This is an a element with no 'href' attribute, so it does not turn red.</a></p>