Is there a reason to use a instead of a:link or a:visited in my stylesheet?
This is of course assuming there would never be a reason to use an
<a>
tag without anhref
value. Maybe that's a mistaken assumption.
It depends on your project. Strictly speaking, that is a mistaken assumption, as not every <a>
element needs to have a href
attribute. Indeed, it's still not required in HTML5 to specify href
for every <a>
. Chris Blake and Ryan P mention named anchors, and I'll add that while the name
attribute for <a>
has been made obsolete as of HTML5, named anchors are still rife and will continue to be, simply by legacy and tradition.
That said, going forward, authors are recommended to use id
attributes and not named anchors to designate document anchor fragments.
Also, <a>
elements that lack href
attributes but have onclick
attributes for JavaScript are a mess. Even if you insist on using onclick
to bind events, for the sake of graceful degradation you should at least point it somewhere using href
.
But to make things simple, let's assume that you won't be writing <a>
elements without href
attributes.
With this in mind, going back to the CSS selectors, there are two important points to consider:
Are they the same?
No, the selectors a
and a:link, a:visited
are not strictly equivalent. I'll quote a previous answer of mine on this topic:
The selector
a
should match any<a>
elements, whilea:link
only matches<a>
elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as<a>
elements with ahref
attribute). Nowhere does it state in either specification thata
should automatically translate toa:link
or vice versa.
In other words, in HTML, a:link, a:visited
(in CSS1) is strictly equivalent to a[href]
(in CSS2 with an attribute selector) or a:any-link
(new in Selectors level 4), rather than a
. Note that it doesn't matter whether the attribute has a value or not, as long as it is present the pseudo-classes will match, hence [href]
. Note also that this is true for all current standards of HTML, and I believe this includes HTML5, since as mentioned above href
is not a required attribute in any existing spec.
Just bear in mind, that other languages may define completely different semantics for :link
and :visited
— it just so happens that they coincide with an equally specific selector in HTML, which is covered next...
Specificity
This is a huge gotcha: a
is less specific than either a:link
or a:visited
, which is a very common source of specificity problems that are particularly evident when applying styles to a
, a:link
and a:visited
separately. This then leads to all kinds of !important
hacks to get around a lack of understanding of specificity.
For example, consider this CSS:
/* All unvisited links should be red */
a:link {
color: red;
}
/* All visited links should be slightly darker */
a:visited {
color: maroon;
}
/* But no matter what, header links must be white at all times! */
body > header > a {
color: white;
}
This doesn't work as expected, because a:link
and a:visited
(what I call generalized rules/selectors) are more specific than body > header > a
(what I call a specialized rule/selector), so header links will in fact never be white:
/* 1 pseudo-class, 1 type -> specificity = (0,1,1) */
a:link, a:visited
/* 3 types -> specificity = (0,0,3) */
body > header > a
Now the first thing that comes to mind for most CSS coders is to throw in !important
, trumping specificity altogether:
body > header > a {
color: white !important;
}
But that gets you all kinds of bad rep, right? So let's not do that.
Selectors level 4 gives you not one, but two solutions to this specificity problem. These solutions, new as they are, aren't supported in Internet Explorer and Microsoft Edge Legacy (the UWP/EdgeHTML/not-Chromium one), but thankfully there is a third solution that works in Internet Explorer 7 and later, which is a[href]
, the attribute selector I mentioned above.
1. The :any-link
pseudo-class
:any-link
has some history behind it which you can read in my answer to this question, but practically speaking, :any-link
serves as a catch-all for :link, :visited
. Its main purpose is to eliminate selector duplication, and for that reason there is in fact an equivalent in the form of :is(:link, :visited)
.
You can use a:any-link
in your specialized rule to match the specificity of the generalized a:link
and a:visited
rules, thereby allowing it to override them:
a:link {
color: red;
}
a:visited {
color: maroon;
}
/* 1 pseudo-class, 3 types -> specificity = (0,1,3) */
body > header > a:any-link {
color: white;
}
2. The :where()
pseudo-class
:where()
also has some history behind it, but essentially it's an analogue to :is()
with the exception that it zeroes out the specificity of its argument. See my answer to this question for an in-depth guide to how it works.
You can wrap the :link
and :visited
pseudo-classes in :where()
s to remove their pseudo-class specificity, thereby allowing them to be overridden by the specialized rule:
/* 1 type -> specificity = (0,0,1) */
a:where(:link) {
color: red;
}
/* 1 type -> specificity = (0,0,1) */
a:where(:visited) {
color: maroon;
}
/* 3 types -> specificity = (0,0,3) */
body > header > a {
color: white;
}
3. a[href]
(for older browsers)
Fortunately, if you need to support older browsers, an attribute selector is as specific as a pseudo-class. This means you can use a[href]
to mean both/either a:link
and/or a:visited
, and not run into specificity issues because they are equally specific!
/* 1 attribute, 3 types -> specificity = (0,1,3) */
body > header > a[href] {
color: white;
}
So which selector(s) to use?
This is all still incredibly subjective, but I follow these personal rules of thumb:
Apply to
a
styles that do not depend on the state of a link (i.e. as long as it's a link will do).Apply to
a:link
anda:visited
styles where it does matter whether a link is visited or not.Taking into account the specificity problems mentioned above, do not mix any declarations between both
a
anda:link
/a:visited
rules. If I need to apply the same property to both states somewhere, but I already have it in separatea:link
anda:visited
rules, I'll use one of the 3 options above to avoid specificity problems.
For example, here are the link styles I used in my site's Coming Soon page prior to its launch:
a {
text-decoration: none;
transition: text-shadow 0.15s linear;
}
a:link {
color: rgb(119, 255, 221);
}
a:visited {
color: rgb(68, 204, 170);
}
a:hover, a:active {
text-shadow: 0 0 0.5em currentColor;
}
a:focus {
outline: thin dotted;
}
/* ... */
footer a:link, footer a:visited {
color: rgb(71, 173, 153);
}
The text-shadow
transition is defined for all a
elements, regardless of whether they are visited or not, because the transition only takes effect when one of them is moused over and clicked (corresponding to the a:hover, a:active
rule).
Now, I want visited links to have a slightly darker shade than unvisited links, so I put the colors in separate a:link
and a:visited
rules. However, for some reason, I want footer links to appear the same color whether they're visited or not.
If I use footer a
, I'll run into the specificity problems described above, so I choose footer a:link, footer a:visited
instead. This was for legacy reasons (as you'll see below, I originally posted this in 2012!), but of course it can be shortened to footer a:any-link
. However, the specificity-matching principle applies all the same.
Hopefully my advice helps you get a handle on the mess that is link styles.
Why not :visited instead of a:visited for links?
TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited
and :visited
. However, using a:visited
is best practice for future-proofing your code.
TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited
. There is now a functional difference between a:visited
and :visited
! Beware.
For web development languages today, specifically HTML5 and CSS3, you are right: there is functionally no difference between a:visited
and :visited
. Now, please take this with caution: web standards, elements, and user interface protocols are ever-evolving, meaning that in the future, it is possible that a new tag compatible with :visited
may be introduced.
When :visited
was introduced in CSS, the W3C CSS1 spec said:
In CSS1, anchor pseudo-classes have no effect on elements other than 'a'. Therefore, the element type can be omitted from the selector:
a:link { color: red }
==:link { color: red }
HOWEVER, in the CSS2 spec, the behavior of the :visited
pseudo-class was not restricted to just a
tags:
The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to
a
elements with an "href" attribute.
This means that it is up to the document language and browser to determine which elements are compatible with :visited
. While the current industry standard states that for HTML, only a
elements with an href
attribute qualify, this may well change later down the line.
EDIT, August 2016: Looks like the CSS4 Working Draft has confirmed my suspicion; in the new spec, :visited
can be used for other "link-like" elements, namely <area>
and <link>
. The spec says:
The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any
<a>
,<area>
, or<link>
elements with an href attribute are hyperlinks.
So <a>
, <area>
, and <link>
are all treated as hyperlinks, and the spec says that :visited
applies to all hyperlinks. So as of CSS4, you'll be better off including the a
in a:visited
.
Css selectors - a:visited childs
Most CSS rules on :visited
links have been blocked for security reasons.
However, you can still apply border-color
to them.
The only gotcha here is that the border must be also applied on non-visited links, since you can only change the border-color
.
a img {
border: 2px solid white;
}
a:visited img {
border-color: green;
}
fiddle
Difference between a and a:link
a:link
is specifically for links that have not been visited. a
applies to all <a>
elements.
why “a:hover MUST come after a:link and a:visited(w3school)”?
Pseudo-classes must be declared in a specific order.
The mnemonic LoVe HAte is always useful for remembering the correct order:
:link
:visited
:hover
:active
Each pseudo-class corresponds to an event which can only happen later in the timeline than the one before.
That is to say:
A link is unvisited before it is visited.
A link is visited before it is hovered over.
A link is hovered over before it is in active use.
Why doesn't this a:visited css style work?
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited
pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle()
in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight
for visited links, the element's width changes so browsers that would allow changing font-weight
for :visited
links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
- The
window.getComputedStyle
method, and similar functions such aselement.querySelector
, will always return values indicating that a user has never visited any of the links on a page.- If you use a sibling selector such as
:visited + span
, the adjacent element (span in this example) will be styled as if the link were unvisited.- In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
When you first started with CSS, you might have learned about the LoVe-HAte mnemonic for the order in which to specify link selectors (a:link
, a:visited
, a:hover
, a:active
). Have you ever wondered why this mnemonic was chosen?
Well, there's a note in the spec on how the link and dynamic pseudo-classes are treated when multiple rules using all of them apply to the same element, which explains why you need to set link selectors in that order:
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Anyway, the point I'm trying to make above is that all four pseudo-classes, being pseudo-classes, have equal specificity. Everything else about specificity applies. In this case, out of a bunch of equally specific selectors, the last rule is applied. When or how each pseudo-class is triggered is never relevant.
Now, the simple introduction of the .foo
selector causes your second set of link/visited rules to override your first set of link/visited styles and the hover/active styles, forcing links in elements with that class to always appear green until you add hover/active styles with the .foo
selector.
Sorry if my answer seems stitched-up or slipshod by the way, I'm typing this on my iPhone right now and it's pretty hard to think out here...
Difference between a and a:link
a:link
is specifically for links that have not been visited. a
applies to all <a>
elements.
Related Topics
Html5 Video Not Working in Ie 11
Responsive Image Align Center Bootstrap 3
Customise Ng Bootstrap Carousel in Angular
CSS Font Size Using Em Different on Different Pages
Display: Flex - Not Working in Firefox 21
Animate Spinning Circle(Percentage) with CSS
Is There a CSS Selector Which Selects an Element Outside the Current Element
Is There a Style Type Besides Text/Css
Font Awesome Is Not Showing Icon
Ios7 Font Size Change When Create Nsattributedstring from HTML
CSS Text Underlining Too Long When Letter-Spacing Is Applied
How to Do Tag Wrapping in VS Code
How to Achieve Curved Top Pointer