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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -