Web designers leverage link pseudo-classes to customize the visual presentation of HTML link states. Commonly utilized CSS pseudo-classes for hyperlink styling include :link, :visited, :hover, :active, and :focus. For instance:
Here’s an overview of each pseudo-class:
– :link selects unvisited links.
– :visited selects visited links.
– :hover refers to the state when the user’s mouse pointer is over a link.
– :active signifies the state during a click event, the brief moment between the action and the link gaining focus or navigating to another page.
– :focus is the state when a link is in focus, often triggered by tabbing or following a click.
Among the five most frequently used pseudo-classes for links, only :link and :visited are strictly classified as link pseudo-classes, specifically tailored for elements. The remaining three — :hover, :active, and :focus — are dynamic pseudo-classes applicable to other HTML elements as well.
To enhance CSS specificity, combining pseudo-classes is advisable. For example, you might want distinct visuals for a visited link and an unvisited link when hovered over.
In the given example, unvisited links will turn green when hovered over, whereas visited links will change to red.
CSS specificity dictates that links can match multiple pseudo-classes simultaneously, emphasizing the importance of the order of style rules in your stylesheet. When a link is clicked, it briefly matches both :hover and :active states due to the overlapping conditions.
To ensure proper rendering of link pseudo-class styles, follow this suggested order:
W3C’s pseudo-class specifications allow for any casing style, but the convention is to use all-lowercase. Variations in casing, such as all-caps or mixed-case, are technically equivalent.
There should be no spacing before and/or after the colon preceding the pseudo-class name in a style rule.
In contemporary web browsers, :visited and :active pseudo-classes are treated differently to safeguard user privacy. The CSS properties that can be rendered in rules involving these pseudo-classes are restricted, meaning the color property is the only difference that can be specified.
For instance, you cannot assign different font styles or sizes to these pseudo-classes. In modern browsers, attempting to do so will not yield the expected results.
Visited links will not render in all-caps; they will be in all-lowercase, similar to unvisited links.
For a comprehensive explanation of the :visited and :active pseudo-class behavior, refer to the article “Why the :visited Pseudo-class is Strange.”
For further reading, explore resources such as “Designing the Perfect Hyperlink — It’s Not as Simple as You Think,” “Designing Hyperlinks: Tips and Best Practices,” and “HTML5 Download Attribute Guide.”
