{"id":14283,"date":"2011-09-06T20:35:52","date_gmt":"2011-09-07T03:35:52","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14283"},"modified":"2021-07-14T12:17:35","modified_gmt":"2021-07-14T19:17:35","slug":"visited","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/","title":{"rendered":":visited"},"content":{"rendered":"\n<p>The<code>:visited<\/code> pseudo-class selector can change <em>some<\/em> of the styling on an anchor link (<code>&lt;a&gt;<\/code>) element if the user&#8217;s browser has already visited the link. It&#8217;s meant to help users distinguish the difference between links they have and haven&#8217;t visited.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:visited {\n  color: gray;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"limitations-and-usage\">Limitations and usage<\/h3>\n\n\n<p>There is some privacy concern about <code>:visited<\/code>, namely that a malicious website could have links to tons of websites with <code>:visited<\/code> styling, then test the visual style of the links with JavaScript to report back to a server which sites the user has visited. This violates the user&#8217;s privacy and could potentially reveal personally-identifying information.<\/p>\n\n\n\n<p>As a result, most browsers restrict what styling can be changed on <code>:visited<\/code> links, and what styling information can be reported with the <code>getComputedStyle<\/code> method.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Privacy_and_the_:visited_selector\" rel=\"noopener\">This is a good run-down of that situation.<\/a><\/p>\n\n\n\n<p>These are the properties that can be changed with <code>:visited<\/code>:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/\"><code>color<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/\"><code>background-color<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\"><code>border-color<\/code><\/a> (and its sub-properties)<\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline\/\"><code>outline-color<\/code><\/a><\/li><li>The color parts of the <code>fill<\/code> and <code>stroke<\/code> properties<\/li><\/ul>\n\n\n\n<p>You can only use <code>:visited<\/code> to change those properties if the link already has them in the &#8220;unvisited&#8221; or <code>:link<\/code> state. You can&#8217;t use it to add properties that aren&#8217;t already present on the link. For example:<\/p>\n\n\n\n<p>You <em>can<\/em> change the <code>background-color<\/code> of a <code>:visited<\/code> link if the link element already had a background color.<\/p>\n\n\n\n<p>You <em>can&#8217;t<\/em> add a <code>background-color<\/code> to a <code>:visited<\/code> link if it did not have a background color when it was an &#8220;unvisited&#8221; link.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"link-pseudoclasses-in-order\">Link pseudo-classes in order<\/h4>\n\n\n<p>It&#8217;s also useful to know that <a href=\"https:\/\/css-tricks.com\/snippets\/css\/link-pseudo-classes-in-order\/\">most of the link pseudo-classes should be declared in a specific order<\/a>. The order is: <\/p>\n\n\n\n<ol><li>Link<\/li><li>Visited<\/li><li>Hover<\/li><li>Active<\/li><\/ol>\n\n\n\n<p>If you&#8217;re including <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/\"><code>:focus<\/code><\/a> styling for your link, it&#8217;s common to add it between &#8220;hover&#8221; and &#8220;active&#8221;.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eb923baba205154696136a0031c7710d\" src=\"\/\/codepen.io\/anon\/embed\/eb923baba205154696136a0031c7710d?height=450&amp;theme-id=1&amp;slug-hash=eb923baba205154696136a0031c7710d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eb923baba205154696136a0031c7710d\" title=\"CodePen Embed eb923baba205154696136a0031c7710d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"extending-visited\">Extending <code>:visited<\/code><\/h3>\n\n\n<p>Though direct styling for <code>:visited<\/code> links is limited, there are lots of clever ways to extend your options for styling visited links. In 2015 there was a bumper crop of blog posts sharing new ideas for styling <code>:visited<\/code> links:<\/p>\n\n\n\n<p><strong><a href=\"http:\/\/joelcalifa.com\/blog\/revisiting-visited\/\" rel=\"noopener\">Revisiting :visited<\/a><\/strong>, from Joel Califa, shows an example of using <code>localstorage<\/code> to style visited, in-domain links.<\/p>\n\n\n\n<p><strong><a href=\"http:\/\/una.im\/hacking-visited\/\" rel=\"noopener\">Hacking :visited<\/a><\/strong>, from Una Kravets, turns <code>:visited<\/code> on its head by adding an &#8220;unvisited&#8221; tag as <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\"><code>:after<\/code><\/a> content to links, which is then hidden with a background color swap after the link is visited.<\/p>\n\n\n\n<p><strong><a href=\"http:\/\/stelian.firez.be\/post\/pushing-the-limits-of-visited-with-css-blend-modes\/\" rel=\"noopener\">Pushing the limits of :visited with CSS blend modes<\/a><\/strong>, from Stelian Firez, combines a <a href=\"http:\/\/www.quora.com\/How-does-DuckDuckGos-new-visited-feature-work\" rel=\"noopener\">little HTML trick attributed to DuckDuckGo<\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\"><code>background-blend-mode: screen;<\/code><\/a> to fade a custom icon next to a visited link.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/thenewcode.com\/1046\/Styling-Visited-Links-with-SVG\" rel=\"noopener\">Styling Visited Links with SVG<\/a><\/strong>, from Dudley Storey. Uses SVG images with <code>fill<\/code> set to match the page&#8217;s background color when the link is in the <code>:link<\/code> state, then to another color after the link is <code>:visited<\/code>. The tutorial also includes an alternate method using Unicode characters instead of SVG.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<p><a href=\"https:\/\/caniuse.com\/#feat=mdn-css_selectors_visited\" rel=\"noopener\">All browsers<\/a> support this. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/selectors-3\/#link\" rel=\"noopener\"><code>:visited<\/code> in the W3C spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/%3Avisited\" rel=\"noopener\"><code>:visited<\/code> at MDN<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The:visited pseudo-class selector can change some of the styling on an anchor link (&lt;a&gt;) element if the user&#8217;s browser has already visited the link. It&#8217;s meant to help users distinguish the difference between links they have and haven&#8217;t visited. Limitations and usage There is some privacy concern about :visited, namely that a malicious website could [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14281,"menu_order":0,"comment_status":"open","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":[],"acf":[],"jetpack-related-posts":[{"id":14148,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/active\/","url_meta":{"origin":14283,"position":0},"title":":active","date":"September 6, 2011","format":false,"excerpt":"The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It's usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It's most typically used on anchor links (<a href=\"#\"><\/a>). For instance,\u2026","rel":"","context":"With 28 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18708,"url":"https:\/\/css-tricks.com\/lodge\/v10\/139-individual-forums-thread-styling\/","url_meta":{"origin":14283,"position":1},"title":"#139: Individual Forums Thread Styling","date":"October 2, 2012","format":false,"excerpt":"You might argue that the homepage of the Forums is the most important page, but there are equally good arguments for individual thread views being the most important. Data suggests people land on these \"deep links\" in higher numbers than the homepage itself, even though the homepage is the most\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":193485,"url":"https:\/\/css-tricks.com\/snippets\/sass\/sass-things-links\/","url_meta":{"origin":14283,"position":2},"title":"Sass Things for Links","date":"January 17, 2015","format":false,"excerpt":"via Alex King, you can use variables for selectors: $a-tags: 'a, a:active, a:hover, a:visited'; $a-tags-hover: 'a:active, a:hover'; #{$a-tags} { color: red; text-decoration: none; } #{$a-tags-hover} { color: blue; } You can even nest like that, which is where this gets even more useful: .module { #{$a-tags} { color: blue; text-decoration:\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259404,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/any-link\/","url_meta":{"origin":14283,"position":3},"title":":any-link","date":"August 24, 2017","format":false,"excerpt":"The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink. If the term\u00a0source anchor\u00a0lost you, that\u2019s a fancy name for the\u00a0href\u00a0attribute on the HTML elements\u00a0<a>,\u00a0<link>\u00a0and\u00a0<area>. (Why you would need to target an\u00a0<area>\u00a0or\u00a0<link>\u00a0in CSS is beyond me, but hey.) The\u00a0HTML spec\u00a0has a\u2026","rel":"","context":"In \":any-link\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":14283,"position":4},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3303,"url":"https:\/\/css-tricks.com\/snippets\/css\/link-pseudo-classes-in-order\/","url_meta":{"origin":14283,"position":5},"title":"Link Pseudo-Classes (In Order)","date":"August 10, 2009","format":false,"excerpt":"a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:focus { outline: 1px solid blue; } a:active { color: yellow ;} Link, Visited, Hover, ActiveL, V, H, ALoVe, HAte That's missing the \"Focus\" state though, so maybe try thinking: \"Lord Vader Hates Fluffy Animals\"","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14283"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14283"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14283\/revisions"}],"predecessor-version":[{"id":344744,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14283\/revisions\/344744"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14281"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}