Class selector question

[Rokurosv]

Hello everyone, I’m new to CSS Tricks, and kinda a beginner so bare with me please :)
Well i have a little problem when using a class selector to style some of my links. Here’s what i’ve done:
I have styled all the links in the document to a standard look, but one particular thing I’ve done is make the bottom border dotted and red.

Code:

a:link, a:visited{
text-decoration:none;
border-bottom: 1px dotted red;
}

Then I have some links that I want to turn into "buttons" and i have give them the button class

Code:

Button 1

But they have the default style applied to them so i use a class selector to change them

Code:

.buttons {
display: block;
width: 6em;
padding: 0.5em;
line-height: 1.4em;
background-color: grey;
border: 1px solid black;
text-decoration: none;
text-align: center;
margin: 5px 0px 10px 0px;
}

But they carry the default dotted bottom border with them, so i tried using a selector like this:

Code:

.buttons a:link

But it makes the style back to the default style I’ve created, no "box" around them. What can I do to remove the default style apply to them, the bottom border, and why doesn’t the above selector work? I’m testing this on Firefox 3.
Thanks for your help

[cssgirl]

This I think, will do the trick, change to this in CSS:

Code:

a:link.buttons {
styles for buttons
}

Just throwing the class buttons on the a won’t override it because you’ve defined them all to be one way. You will have to be very specific in the CSS to get your buttons class to override the normal settings. Since you defined a:link to be one way, you will have to use a:link.buttons in the CSS to override it.

[Rokurosv]

Thanks for your responses, I changed my code and now it works, so now I see my problem was specifity, I’ll be more careful next time and do the math :D, thanks.

[Author]

Posts