Grow your CSS skills. Land your dream job.

Class selector question

  • # 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.

    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:

    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

    box
    # September 28, 2008 at 5:58 am

    You could try being more specific…

    Code:
    a.buttons:visited{
    /*styling here*/
    }

    etc.

    # September 28, 2008 at 11:06 am

    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.

    # September 28, 2008 at 11:39 am

    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.

    # 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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".