Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > visited Pseudo-class
Sets the style of previously :visited hyperlink elements in a document.
selector:visited { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :visited pseudo-class applies styles to hyperlink elements that the user has already previously navigated.
The syntax for using the :active pseudo-class is straightforward. A selector immediately precedes the pseudo-class.
For example, to change the color of previously visited anchor ( <a>) elements on a page.
a:visited color: #005 }
Setting :visited is often used in conjunction with setting styles for other states of a hyperlink: :link, :active, and :hover.
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, :visited 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 :visited pseudo-class in an embedded stylesheet to set the color of a visited hyperlink on a page.
Show me
:active :focus :hover :link :target