{"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<p>The <code>: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<p>If the term&nbsp;<em>source anchor<\/em>&nbsp;lost you, that\u2019s a fancy name for the&nbsp;<code>href<\/code>&nbsp;attribute on the HTML elements&nbsp;<code>&lt;a&gt;<\/code>,&nbsp;<code>&lt;link&gt;<\/code>&nbsp;and&nbsp;<code>&lt;area&gt;<\/code>. (Why you would need to target an&nbsp;<code>&lt;area&gt;<\/code>&nbsp;or&nbsp;<code>&lt;link&gt;<\/code>&nbsp;in CSS is beyond me, but hey.) The&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/html4\/struct\/links.html\" rel=\"noopener\">HTML spec<\/a>&nbsp;has a whole lot more information on that.<\/p>\n\n\n\n<p>An element that accepts and contains a <code>href<\/code> attribute is a hyperlink and will be selected with <code>: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 <code>:link<\/code> would select all links, but it misses <code>:visited<\/code>, so this wraps them all up together.<\/p>\n\n\n\n<p>Functionally, it&#8217;s just like the attribute selector <code>[href]<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/link\/to\/thing\">Howdy!&lt;\/a><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:any-link {\n  color: red;\n  font-weight: 900;\n  text-decoration: none;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GvBqrY\" src=\"\/\/codepen.io\/anon\/embed\/GvBqrY?height=450&amp;theme-id=1&amp;slug-hash=GvBqrY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GvBqrY\" title=\"CodePen Embed GvBqrY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It&#8217;s worth noting that we could also select the same HTML elements using the <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/m\/matches\/\"><code>:matches()<\/code><\/a> pseudo-class. For example, <code>:matches(:link, :visited)<\/code> will select the same elements as <code>:any-link<\/code>.<\/p>\n\n\n\n<p>Another thing to note is that the spec is currently asking for alternative name suggestions for this selector at the time of this writing. While it&#8217;s unclear if the name will change, the <code>:matches()<\/code> pseudo-class was formerly named <code>:any()<\/code> which could be an indication.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p>The <code>:any-link<\/code> pseudo-element is considered an experimental feature and is part of the Selectors Level 4 specification, which is currently in working draft status.<\/p>\n\n\n\n<p>For full support you&#8217;d want to use it prefixed:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:-webkit-any-link {\n}\n\n:-moz-any-link {\n}\n\n:any-link {\n}<\/code><\/pre>\n\n\n\n<p>And remember not to comma-separate those selectors to combine them, as browsers toss selectors with parts they don&#8217;t understand.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-any-link\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">15*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">3*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">6.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">6.0-6.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/selectors4\/#the-any-link-pseudo\" rel=\"noopener\">Selectors Level 4 Specification<\/a> (Working Draft)<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:any-link\" rel=\"noopener\">Mozilla Documentation<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink. If the term&nbsp;source anchor&nbsp;lost you, that\u2019s a fancy name for the&nbsp;href&nbsp;attribute on the HTML elements&nbsp;&lt;a&gt;,&nbsp;&lt;link&gt;&nbsp;and&nbsp;&lt;area&gt;. (Why you would need to target an&nbsp;&lt;area&gt;&nbsp;or&nbsp;&lt;link&gt;&nbsp;in CSS is beyond me, but hey.) The&nbsp;HTML spec&nbsp;has a whole lot more information on [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":14146,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1332,1333,1331],"acf":[],"jetpack-related-posts":[{"id":14218,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/link\/","url_meta":{"origin":259404,"position":0},"title":":link","date":"September 6, 2011","format":false,"excerpt":"The :link selector is a pseudo-class that targets all anchor (<a>) elements on a page that have an href attribute: a:link { color: aquamarine; } The example above will change the color of all links to aquamarine. When used in combination with the :hover pseudo-class, :link must appear first, or\u2026","rel":"","context":"In \"links\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9168,"url":"https:\/\/css-tricks.com\/snippets\/css\/signify-pdf-bombs\/","url_meta":{"origin":259404,"position":1},"title":"Signify &#8220;PDF Bombs&#8221;","date":"April 27, 2011","format":false,"excerpt":"Any ol' anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links. \/* Add \" (PDF)\" text after links that go to PDFs *\/ a[href$=\".pdf\"]:after { content:\u2026","rel":"","context":"In \"pdf\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14204,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/id\/","url_meta":{"origin":259404,"position":2},"title":"ID","date":"September 6, 2011","format":false,"excerpt":"The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes are denoted in CSS with a \u201cperiod\u201d (.) before the class name, ID attributes are prefixed with an \u201coctothorpe\u201d (#), more commonly known as a \u201chash\u201d or \u201cpound sign\u201d. #header\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14152,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/attribute\/","url_meta":{"origin":259404,"position":3},"title":"[attribute]","date":"September 6, 2011","format":false,"excerpt":"There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p { }. Almost anything more specific than a tag selector uses attributes \u2014 class and ID both select on those attributes on HTML elements. But class and ID aren't\u2026","rel":"","context":"With 26 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154528,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/20-data-data-data-attrdata\/","url_meta":{"origin":259404,"position":4},"title":"#20: Data! data-*! .data()! .attr(data-*)!","date":"October 29, 2013","format":false,"excerpt":"Data. In the world of jQuery, it's all about bits of information that are attached directly to elements (rather than, say, a variable with onus only to itself). There is a ton of ways to save bits of data on the \"client side\" (in the browser, rather than the server).\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":149724,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/08-preventdefault-stoppropagation-return-false\/","url_meta":{"origin":259404,"position":5},"title":"#08: preventDefault, stopPropagation, and return false","date":"September 11, 2013","format":false,"excerpt":"It came up very briefly in the last video: how do you stop the browser from jumping down when you click a hash link? That is the default browser behavior, and fortunately, with JavaScript, we can tell the browser not to do that. The most straightforward way to handle it\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259404"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=259404"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259404\/revisions"}],"predecessor-version":[{"id":344740,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/259404\/revisions\/344740"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14146"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=259404"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=259404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}