Styling links with CSS

Question

I'm trying to style these links:

        <a class="sub" href="#">Email Updates</a>
        <a class="sub" href="#">RSS Updates</a>

With this CSS:

.sub:link, .sub:visited{height: 50px; width: 308px; background-color: #669900; line-height: 50px; margin: 0 0 0 -15px; font-size: 35px; font-family: "Helvetica", sans-serif; color: #FFFFFF; text-decoration: none;}
.sub:hover{background-color: #336600;}

Do you see anything incorrect? All the style being applied to my links is my default,which is this:

a{
    float:  none;
    color:  #669900;
    text-decoration: underline;
}

And I was sure to put that BEFORE my ".sub" styles. Any ideas? Thanks!

Answer 1

Use the :active psuedo-class as well, should get you all set.

.sub:link, .sub:visited, .sub:active { }

Answer 2

The a selector is more specific than the classname. Since the link has to be an a, whereas the a might be of class 'sub,' but it might not.

If you revise the css to:

a.sub { /* css */ }

it becomes more specific, and

a.sub:link { /* css */ }

even more so.

Answer 3

Try this;

.sub a:link, .sub a:visited {
height : 50px;
width : 308px;
background-color : #669900;
line-height : 50px;
margin : 0 0 0 -15px;
font-size : 35px;
font-family : "Helvetica", sans-serif;
color : #ffffff;
text-decoration : none;
}
.sub a:hover {
background-color : #336600;
}