{"id":14148,"date":"2011-09-06T19:47:21","date_gmt":"2011-09-07T02:47:21","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14148"},"modified":"2021-07-14T12:36:57","modified_gmt":"2021-07-14T19:36:57","slug":"active","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/active\/","title":{"rendered":":active"},"content":{"rendered":"\n<p>The <code>:active<\/code> pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It&#8217;s usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It&#8217;s most typically used on anchor links (<code>&lt;a href=\"#\">&lt;\/a><\/code>).<\/p>\n\n\n\n<p>For instance, here&#8217;s CSS that will make anchor links bump down one pixel (giving the impression of being pushed in three-dimensional space) in the active state:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GtHfd\" src=\"\/\/codepen.io\/anon\/embed\/GtHfd?height=250&amp;theme-id=1&amp;slug-hash=GtHfd&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GtHfd\" title=\"CodePen Embed GtHfd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><script async=\"\" src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<p><code>:active<\/code> can also apply to any element. In the Pen below, clicking anywhere on the page will make the whole page yellow:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_sDBzb\" src=\"\/\/codepen.io\/anon\/embed\/sDBzb?height=250&amp;theme-id=1&amp;slug-hash=sDBzb&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed sDBzb\" title=\"CodePen Embed sDBzb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><script async=\"\" src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<p>It is best practice to cover all of the &#8220;states&#8221;, particularly for links. An easy way to do that is &#8220;LOVE HATE&#8221; or<\/p>\n\n\n\n<ul><li><strong>L <\/strong><code>:link<\/code><\/li><li><strong>O<\/strong><\/li><li><strong>V<\/strong> <code>:visited<\/code><\/li><li><strong>E<\/strong><\/li><\/ul>\n\n\n\n<ul><li><strong>H<\/strong> <code>:hover<\/code><\/li><li><strong>A<\/strong> <code>:active<\/code><\/li><li><strong>T<\/strong><\/li><li><strong>E<\/strong><\/li><\/ul>\n\n\n\n<p>Doing them in that order is ideal.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:link { \/* Essentially means a[href], or that the link actually goes somewhere *\/\n  color: blue;\n}\na:visited {\n  color: purple;\n}\na:hover {\n  color: green;\n}\na:active {\n  color: red;\n}<\/code><\/pre>\n\n\n\n<p>Otherwise, say if you listed the <code>:visited<\/code> style last, if that link was visited it would <a href=\"http:\/\/jsfiddle.net\/chriscoyier\/puZds\/\" rel=\"noopener\">override<\/a> the <code>:active<\/code> and <code>:hover<\/code> declaration and the link would always be purple regardless if you were hovering or if the link was active (not ideal).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">All<\/abbr><\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_selectors_active\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h2>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-14148\">\n\n  <time datetime=\"2017-08-24\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/any-link\/\">\n      :any-link    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/any-link\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element:any-link { color: red; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14148\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Feb 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/\">\n      :focus    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/\" class=\"almanac-example\">\n      <code class=\"language-css\">textarea:focus { background: pink; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14148\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/\">\n      :hover    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/\" class=\"almanac-example\">\n      <code class=\"language-css\">a:hover { color: #f8a100; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14148\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 4, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/link\/\">\n      :link    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/link\/\" class=\"almanac-example\">\n      <code class=\"language-css\">a:link { color: #f8a100; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14148\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/\">\n      :visited    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/\" class=\"almanac-example\">\n      <code class=\"language-css\">a:visited { color: #777; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It&#8217;s usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It&#8217;s most typically used on anchor links (&lt;a href=&#8221;#&#8221;>&lt;\/a>). For instance, here&#8217;s CSS that will make [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14146,"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":18619,"url":"https:\/\/css-tricks.com\/lodge\/v10\/107-building-snippets-area-part-4-javascript\/","url_meta":{"origin":14148,"position":0},"title":"#107: Building Snippets Area, Part 4 (JavaScript)","date":"October 1, 2012","format":false,"excerpt":"With the design for the snippets area \"done\" - we can now move into some interactivity (read: JavaScript). We add a super lame rollover for the links on the left just so we have something, but we know we'll change that later. Then we set about actually writing some JavaScript.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3751,"url":"https:\/\/css-tricks.com\/snippets\/css\/remove-dotted-link-borders\/","url_meta":{"origin":14148,"position":1},"title":"Remove Dotted Link Borders","date":"September 4, 2009","format":false,"excerpt":"Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when \"tabbed\" to. These borders also show up when the link is clicked (in it's \"active\" state),\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18569,"url":"https:\/\/css-tricks.com\/lodge\/v10\/95-javascript-for-multiple-google-custom-search-engines\/","url_meta":{"origin":14148,"position":2},"title":"#95: JavaScript for Multiple Google Custom Search Engines","date":"September 30, 2012","format":false,"excerpt":"All of our Google Custom Search Engines are set up (we set up a different one for each section of the site). Our UI for search is ready to go. We have templates for each search results subpage ready to go. We just have one final step to get everything\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14283,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/","url_meta":{"origin":14148,"position":3},"title":":visited","date":"September 6, 2011","format":false,"excerpt":"The:visited pseudo-class selector can change some of the styling on an anchor link (<a>) element if the user's browser has already visited the link. It's meant to help users distinguish the difference between links they have and haven't visited. a:visited { color: gray; } Limitations and usage There is some\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14172,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/","url_meta":{"origin":14148,"position":4},"title":":disabled","date":"September 6, 2011","format":false,"excerpt":"The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user's interaction\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3381,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/make-entire-div-clickable\/","url_meta":{"origin":14148,"position":5},"title":"Make Entire Div Clickable","date":"August 11, 2009","format":false,"excerpt":"Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic and accessible, while being \"clickable\" over the whole area. It doesn't break text selection and respects other \"nested\" interactive elements. This is perfectly valid HTML:\u2026","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\/14148"}],"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=14148"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14148\/revisions"}],"predecessor-version":[{"id":344765,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14148\/revisions\/344765"}],"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=14148"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}