:link and :visited are mutually exclusive
One thing that bit me once while writing some CSS, was the
:link pseudo-class. Apparently, it is applied to all links that have not yet been visited. This is in contrast to what, for example, the MDN docs say and what I had assumed based on the name (I would assume that
:link refers to all links, not just the not-yet-visited ones).
The CSS specification clearly states what
User agents commonly display unvisited links differently from previously visited ones. Selectors provides the pseudo-classes
:visitedto distinguish them:
:linkpseudo-class applies to links that have not yet been visited.
:visitedpseudo-class applies once the link has been visited by the user.
After some amount of time, user agents may choose to return a visited link to the (unvisited) ‘
The two states are mutually exclusive.
The usually-correct MDN docs say something quite different:
:linkCSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like
:visited. In order to style only non-visited links, you need to put the
:linkrule before the other ones, as defined by the LVHA-order:
:focuspseudo-class is usually placed right before or right after
:hover, depending of the expected effect.
Luckily, webplatform.org is right. It almost literally copies the description from the CSS specification as quoted above.