CODEWITHSUNDEEP
csscss-selectorspseudo-class
Rihards
Rihards

Reputation: 10339

How to select all a pseudo-classes in CSS?

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.

Upvotes: 9

Views: 5990

Answers (2)

Liam Bailey
Liam Bailey

Reputation: 5905

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

Upvotes: 5

Jesse
Jesse

Reputation: 10466

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.

Upvotes: 0

Related Questions