First off I am pretty new to CSS so this might be a very basic question.
The problem I am having is trying to apply a specific style to a link. What I have done is created a basic link style for all the links in the site. Now I want to override that style for a single link. The HTML I used is like what is shown below
<h1 class="pageHeading">Page Title</h1><a class="topLink" href="#" >Test link</a>
The CSS that I used for this is
.pageHeading
{
display: inline;
} A:link {
color: #491DF6;
} A:visited {
color: #491DF6;
} A:hover {
background: #491DF6;
color: #FFFFFF;
} .topLink {
font-size: 40pt;
} .topLink A:link {
color: #FE0B0B;
} .topLink A:visited {
color: #FE0B0B;
} .topLink A:hover {
background: #FE0B0B;
color: #FFFFFF;
}
The link is taking the value of A:link i.e. it is showing up with color #491DF6 even when I apply the class topLink to the link.
Why is this happening? How can apply the styles from a specific class while to a link
Thanks in advance
1 answer
points
your CSS selector .toplink A:link says "find all elements of class toplink with a child a:link" ... This would select the following:
<div class="topLink"><a href="#">Test Link</a></div>
For the HTML you provided, your CSS should actually be something like:
.pageHeading {
display: inline;
}
A:link {
color: #491DF6;
}
A:visited {
color: #491DF6;
}
A:hover {
background: #491DF6;
color: #FFFFFF;
}
A.topLink {
font-size: 40pt;
}
A.topLink:link {
color: #FE0B0B;
}
A.topLink:visited {
color: #FE0B0B;
}
A.topLink:hover {
background: #FE0B0B;
color: #FFFFFF;
}
- Thanks a lot for that. That cleared up a lot of questions I had.
