• # September 27, 2008 at 10:57 pm

    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.

    a:link, a:visited{
    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


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

    .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:

    .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

    # September 28, 2008 at 11:06 am

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

    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.

    # September 28, 2008 at 4:00 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.