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.
But they carry the default dotted bottom border with them, so i tried using a selector like this:
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
This I think, will do the trick, change to this in CSS:
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.
Lindsey and box are right, the problem was specificity. You’ll need that "buttons" class to be more specific than the "a" selectors. a:link has a specificity value of 11, while .buttons is only 10. If you add "a" so it’s a.buttons, it’ll be 11, and since it’s listed afterward, it’ll "win" and remove that red bottom border.