{"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=https://css-tricks.com/"////codepen.io//anon//embed//GtHfd?height=250&amp;theme-id=1&amp;slug-hash=GtHfd&amp;default-tab=result\%22 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=https://css-tricks.com/"////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=https://css-tricks.com/"////codepen.io//anon//embed//sDBzb?height=250&amp;theme-id=1&amp;slug-hash=sDBzb&amp;default-tab=result\%22 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=https://css-tricks.com/"////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=https://css-tricks.com/"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://css-tricks.com/"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/"https:////css-tricks.com//almanac//selectors//a//any-link///">\n      :any-link    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"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/"https:////css-tricks.com//almanac//selectors//f//focus///">\n      :focus    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"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/"https:////css-tricks.com//almanac//selectors//h//hover///">\n      :hover    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"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/"https:////css-tricks.com//almanac//selectors//l//link///">\n      :link    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"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/"https:////css-tricks.com//almanac//selectors//v//visited///">\n      :visited    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"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/"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&amp;d=retro&amp;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/"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 [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}