CODEWITHSUNDEEP
css
jim
jim

Reputation: 3

Pseudo classes not working

This should be an easy solve but I'm not sure why this is happening. I have a div with an id of test and inside that div, I have a paragraph tag with a link.

Currently, within the test class, the links are not visible and I don't understand why. I want a global pseudo class for links that I do not want anything special for. That should be be the code in the following 4 lines.

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#000;text-decoration:none;}
a:active {color:#000;text-decoration:none;}

Where I do want to do something special, I can refer to the #test class as I have it below that the browser should only use that class within the test div and nowhere else. Am I incorrect on this?

#test p a:link, a:visited, a:hover, a:active {color: #FFFFFF;}

FF shows me that test is being used outside of the test div. In other words, on a totally different page where test is not even used, I can see that the test class is being used.

Upvotes: 0

Views: 2157

Answers (2)

JohnP
JohnP

Reputation: 50019

#test p a:link, a:visited, a:hover, a:active {color: #FFFFFF;}

should be 

#test p a:link, #test p a:visited, #test p a:hover, #test p a:active {color: #FFFFFF;}

You forgot to add the reference to the test div for each of the link pseudo classes

Upvotes: 0

Shaz
Shaz

Reputation: 15867

CSS does not work that way. You have to define #test for each one. Example:

#test p a:link, #test p a:visited, #test p a:hover, #test p a:active {
    color: #FFFFFF;
}

Upvotes: 3

Related Questions