Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 673
Rihards Avatar asked Oct 16 '10 18:10

Rihards


1 Answers

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

like image 82
Liam Bailey Avatar answered Sep 21 '22 05:09

Liam Bailey