Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > link Pseudo-class
Sets the style of unvisited hyperlink elements in a document.
selector:link { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :link pseudo-class applies styles to hyperlink elements that the user has not previously navigated.
The syntax for using the :link pseudo-class is straightforward. A selector immediately precedes the pseudo-class.
For example, to change the color of unvisited anchor ( <a>) elements on a page.
a:link { color: #005 }
Setting :link is often used in conjunction with setting styles for other states of a hyperlink: :active, :hover, and :visited.
a:link, a:visited {
color: #005 }
a:active {
background-color: palegoldenrod; color: #500 }
a:hover {
color: #500 }
The above shows how anchor elements are styled in this workshop.
In addition, :link can apply to any element that contains a hyperlink element.
The below shows an <a> tag wrapped in a <p> element, and styled to look like a button, as used in many instances in this workshop.
/* HTML */
<p class="showme"><a href="someDemo.aspx" title="Click here to see a demo.">
<img src="/shared/cool.gif" width=15 height=15 align="absmiddle"> Show me </a></p>
/* CSS */
.showme a:link, .showme a:visited {
font: bold 11pt arial; background: navy; color: lime;
text-decoration: none; padding: 8px; border-radius: 12px }
.showme a:hover {
background: maroon; color: yellow;
text-transform: uppercase }
.showme a:active {
background: darkslategray; color: khaki }
Show me
The following demonstrates use of the :link pseudo-class in an embedded stylesheet to set the color of an unvisited hyperlink on a page.
Show me
:active :focus :hover :target :visited