{"id":14218,"date":"2011-09-06T20:14:42","date_gmt":"2011-09-07T03:14:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14218"},"modified":"2022-01-04T12:34:13","modified_gmt":"2022-01-04T20:34:13","slug":"link","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/link\/","title":{"rendered":":link"},"content":{"rendered":"\n

The :link<\/code> selector is a pseudo-class that targets all anchor (<a><\/code>) elements on a page that have an href<\/code> attribute:<\/p>\n\n\n\n

a:link {\n  color: aquamarine;\n}<\/code><\/pre>\n\n\n\n
The example above will change the color of all links to aquamarine.<\/p>\n\n\n\n
When used in combination with the :hover<\/code> <\/a>pseudo-class, :link<\/code> must appear first, or else not be defined at all, in order for the :hover<\/code> styles to work. This is because they are equally specific<\/a>, so if :link<\/code> came after, those styles would override the hover styles. Think LOVE and HATE<\/a> to get the order right. <\/p>\n\n\n\n
The :link<\/code> pseudo-class will target all <a><\/code> elements that have an href<\/code> attribute, even if the href<\/code> has an empty value. So, in that sense, it is like the attribute selector<\/a> [href]<\/code>.<\/p>\n\n\n\n
Here are some examples to see what will match the :link<\/code> pseudo-class:<\/p>\n\n\n\n
<!-- will be matched -->\n<a href=\"https:\/\/css-tricks.com\">CSS-Tricks<\/a>\n\n<!-- invalid HTML, but will still match -->\n<a href>CSS-Tricks<\/a><\/code>\n\n<!-- will not be matched -->\n<a>CSS-Tricks<\/a><\/code><\/pre>\n\n\n\n
There are only three HTML elements that accept the href<\/code> attribute: <a><\/code>, <link><\/code>, and <area><\/code>. Only the <a><\/code> element can be styled via the :link<\/code> pseudo-class. Also, you cannot add the href<\/code> attribute to another type of element and make it style-able via :link<\/code>. In other words, if you had the following HTML:<\/p>\n\n\n\n
<div href=\"https:\/\/css-tricks.com\">CSS-Tricks<\/div><\/code><\/pre>\n\n\n\n
The following CSS would have no effect:<\/p>\n\n\n\n
div:link {\n  color: aquamarine;\n}<\/code><\/pre>\n\n\n\n
Again, the HTML would fail validation, since href<\/code> is not a valid attribute for <div><\/code>.<\/p>\n\n\n\n
Due to the fact that :link<\/code> can target only <a><\/code> elements, :link<\/code> styles can be defined in the CSS without the element type selector, like this:<\/p>\n\n\n\n
:link {\n  color: aquamarine;\n}<\/code><\/pre>\n\n\n\n
Also, for all practical purposes when using HTML, the :link<\/code> pseudo-class is somewhat irrelevant since the same effect can be achieved by simply targeting all <a><\/code> elements directly:<\/p>\n\n\n\n
a {\n  color: aquamarine;\n}<\/code><\/pre>\n\n\n\n
However, if there are any <a><\/code> elements on the page that don’t have the href<\/code> attribute set (for example, on legacy pages that used <a name=\"example\"><\/code>), the above code would target those elements too, and this may not be the desired result.<\/p>\n\n\n\n
It should also be pointed out that, starting with CSS2, other document languages (besides HTML) may define other elements, besides anchors, that can be styled via the :link<\/code> pseudo-class.<\/p>\n\n\n
Browser support<\/h3>\n\n\n
IE<\/th>Edge<\/th>Firefox<\/th>Chrome<\/th>Safari<\/th>Opera<\/th><\/tr><\/thead>
All<\/td>All<\/td>All<\/td>All<\/td>All<\/abbr><\/td>All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Android Chrome<\/th>Android Firefox<\/th>Android Browser<\/th>iOS Safari<\/th>Opera Mobile<\/th><\/tr><\/thead>
All<\/td>All<\/td>All<\/td>All<\/td>62<\/td><\/tr><\/tbody><\/table>
Source: caniuse<\/a><\/figcaption><\/figure>\n\n\n