{"id":259404,"date":"2017-08-24T05:46:50","date_gmt":"2017-08-24T12:46:50","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=259404"},"modified":"2021-07-14T12:15:09","modified_gmt":"2021-07-14T19:15:09","slug":"any-link","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/any-link\/","title":{"rendered":":any-link"},"content":{"rendered":"\n

The :any-link<\/code> pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.<\/p>\n\n\n\n

If the term source anchor<\/em> lost you, that\u2019s a fancy name for the href<\/code> attribute on the HTML elements <a><\/code>, <link><\/code> and <area><\/code>. (Why you would need to target an <area><\/code> or <link><\/code> in CSS is beyond me, but hey.) The HTML spec<\/a> has a whole lot more information on that.<\/p>\n\n\n\n

An element that accepts and contains a href<\/code> attribute is a hyperlink and will be selected with :any-link<\/code>. This becomes a handy way of selecting all link-based HTML elements that might otherwise appear unrelated and without touching the markup. Perhaps it exists because you might think :link<\/code> would select all links, but it misses :visited<\/code>, so this wraps them all up together.<\/p>\n\n\n\n

Functionally, it’s just like the attribute selector [href]<\/code>.<\/p>\n\n\n\n\n\n\n\n

<a href=\"\/link\/to\/thing\">Howdy!<\/a><\/code><\/pre>\n\n\n\n
:any-link {\n  color: red;\n  font-weight: 900;\n  text-decoration: none;\n}<\/code><\/pre>\n\n\n\n