CSS 'a' link subclass syntax

CSS 'a' link subclass syntax

I am currently working on a newsletter project in Hitwise. And there is one bug required me to change the newsletter’s layout – mainly look and feel. I come across a problem where I need to highlight a text represent the country you are in. I created the following CSS:
.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.

Loading

Leave a Reply

Your email address will not be published. Required fields are marked *

My new Snowflake Blog is now live. I will not be updating this blog anymore but will continue with new contents in the Snowflake world!