{"id":2005,"date":"2016-08-09T14:44:45","date_gmt":"2016-08-09T14:44:45","guid":{"rendered":"http:\/\/cssreset.com\/?p=2005"},"modified":"2016-08-09T14:44:45","modified_gmt":"2016-08-09T14:44:45","slug":"using-pseudo-selectors-to-style-links","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-pseudo-selectors-to-style-links\/","title":{"rendered":"Using Pseudo-Selectors to Style Links"},"content":{"rendered":"<p>CSS3 allows for various different pseudo-selectors to be applied to anchor tags in order to style links at various different stages of use or activity. The pseudo-selectors that are often applied to links are:<\/p>\n<ul>\n<li>:link &#8211; applies to links that have not been clicked\/visited<\/li>\n<li>:hover &#8211; applies to links that are hovered upon<\/li>\n<li>:visited &#8211; applies to links that have been clicked\/visited<\/li>\n<li>:active &#8211; applies to a link when it is active (meaning when it is being clicked)<\/li>\n<\/ul>\n<p>Using a:link is used to style anchor tags that are specifically links. The default anchor tag styling will apply to your links unless the styling in a:link overrides them.<\/p>\n<p>a:hover applies to links that are hovered upon. If you want a link to have no text-decoration when it&#8217;s hovered upon, you would style it like this:<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">a<span style=\"color: #3333ff\">:hover<\/span><span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">text-decoration<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #993333\">none<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-2010 aligncenter\" alt=\"hover\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2016\/08\/hover.png\" width=\"297\" height=\"211\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/hover.png 297w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/hover-180x127.png 180w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/p>\n<p>a:visited applies to links that have already been visited or clicked. If you want your visited links to be a different color than non-visited or non-clicked links, your styling should look like this:<\/p>\n<div id=\"ig-sh-2\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">a<span style=\"color: #3333ff\">:visited<\/span><span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">color<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc00cc\">#d1eeee<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-2011 aligncenter\" alt=\"Screen Shot 2016-08-09 at 10.40.48 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2016\/08\/Screen-Shot-2016-08-09-at-10.40.48-AM.png\" width=\"344\" height=\"212\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/Screen-Shot-2016-08-09-at-10.40.48-AM.png 344w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/Screen-Shot-2016-08-09-at-10.40.48-AM-300x184.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/Screen-Shot-2016-08-09-at-10.40.48-AM-180x110.png 180w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/><\/p>\n<p>a:active is used to style links as they&#8217;re being clicked. If you want your active links to take on a different color while they&#8217;re being clicked, your styling should look like this:<\/p>\n<div id=\"ig-sh-3\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">a<span style=\"color: #3333ff\">:active<\/span><span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">color<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc00cc\">#a24bfd<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-2012 aligncenter\" alt=\"active\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2016\/08\/active.png\" width=\"332\" height=\"203\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/active.png 332w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/active-300x183.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/08\/active-180x110.png 180w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/p>\n<p>While :hover, :visited, and :active are typically applied to anchor tags, they can also be applied to any other HTML element as well.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS3 allows for various different pseudo-selectors to be applied to anchor tags in order to style links at various different stages of use or activity. The pseudo-selectors that are often applied to links are:<\/p>\n<p>:link &#8211; applies to links that have [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/using-pseudo-selectors-to-style-links\/\" title=\"Click to read 'Using Pseudo-Selectors to Style Links'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2011,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,6,10],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2005"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2005"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2005\/revisions"}],"predecessor-version":[{"id":2013,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2005\/revisions\/2013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2011"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}