John 0

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

4
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;
}
Answered almost 7 years ago by Justin Hileman
  • Thanks a lot for that. That cleared up a lot of questions I had. John almost 7 years ago