hyperlink - Trouble with a:visited pseudoclass... Links all showing as the same color after they are "visited" despite having different colors in css -
i having trouble a:visited (or 1 of other maybe?) pseudoclass. want have links show different colors in different elements (black in .link-box , red in #main-menu regardless of if have been visited or not), @ first, once "visited" links, same color (red).
any idea i've done wrong here?
.link-box { background-color: blue; } .link-box a:link, a:visited, a:active { color: black; padding-left: 10px; font-weight: bold; } .link-box a:hover { color: #d31900; text-decoration: none; } #main-menu { height: 60px; background-color: black; } #main-menu a:link, a:visited, a:active { color: red; text-transform: uppercase; } #main-menu a:hover { color: #ff6600; } <div class="link-box"> <a href="">link box link</a> </div> <div id="main-menu"> <a href="">main menu link</a> </div>
the order of a: pseudo-classes in cascade matters.
the conventional mnemonic remember in order style a: pseudo-classes is:
love hate
ie. link, visited, hover, active
re-order stylesheet, this:
.link-box a:link, .link-box a:visited { color: black; padding-left: 10px; font-weight: bold; } .link-box a:hover { color: #d31900; text-decoration: none; } .link-box a:active { color: black; padding-left: 10px; font-weight: bold; } #main-menu a:link, #main-menu a:visited { color: red; text-transform: uppercase; } #main-menu a:hover { color: #ff6600; } #main-menu a:active { color: red; text-transform: uppercase; }
Comments
Post a Comment