How to select all a pseudo-classes in CSS?

Question

Hi,

I've a button and I wanted to know if it is possible to make the css bellow shorter.

.button a:link, .button a:visited, .button a:hover, .button a:active {
    color: #000;
    text-decoration: none;
}

I mean maybe:

.button a:* {
    color: #000;
    text-decoration: none;
}

Maybe there isn't any shorter way, but I just wanted to know. I found something like this out:

.button a:link:visited:hover:active {
    color: #000;
    text-decoration: none;
}

But it wasn't working, don't know why.. For information - I've general css for a in the top of the file:

a:link {
    color: #DA5632;
}
a:visited {
    color: #CE3408;
}
a:hover {
    color: #289BF8;
}
a:active {
    color: #CE3408;
}

So the button class a should overwrite the main a css.

Answer 1

.button a is all you need

I always set a default style on a, and target pseudo classes only when I need to have a different effect.

Edit to include fix from comments:

Because a default style for the a element is declared like:

a:link {
    color: #DA5632;
}
a:visited {
    color: #CE3408;
}
a:hover {
    color: #289BF8;
}
a:active {
    color: #CE3408;
}

at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.

Answer 2

Here are some things to try

make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".

If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.

If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:

color: #fff !important;

this will demand that they are parsed last.