.headerText a .selected { color: #f25412; font-weight: normal; text-decoration: none; }To me it looks great and it is proper CSS syntax. However, it just not working. The link text applied is: <a class=”selected” href=”http://www.hitwise.com.au/” target=”_blank”> Australia </a> which is within a <div class=”headerText”> tag. I have spent more than an hour to figure out what really happened, but I failed. Luckily I have a great designer friend – Jim, who is working in Resultmedia as a web designer. I asked for his help and he came back with his solution:
.headerText a.selected { color: #f25412; font-weight: normal; text-decoration: none; } .headerText a.selected:link { color: #f25412; font-weight: normal; text-decoration: none; } .headerText a.selected:visited { color: #f25412; font-weight: normal; text-decoration: none; } .headerText a.selected:hover { color: #f25412; font-weight: normal; text-decoration: none; }which worked. The key difference is that there is no space between “a” and “.selected”, it was the space caused me the headache. Thanks Jimmy! I hope this might help someone as well.