Styling the Links in CSS - css

Question

In CSS properties, there are four pseudo selectors available to style your links. The selectors are a:link, a:visited, a:active, and a:hover.
Are you suppose to do this...
a:link{color:red;}
a:visited{color:blue;}
a:hover{color:green;}
a:active{color:yellow;}
This worked, but is there a shorter and/or simpler way.

Answer 1

If you want different rules for each pseudo target, then the way you have it written is the shortest you can make it. Had the rulesets been the same, you could simply comma delimit the selectors:
a:link, a:visited, a:hover, a:active { color: red; }
In the above example the ruleset for each pseudo is the same, so it in turn can be shortened to:
a { color: red; }
When using these specific pseudo classes, be aware that order matters when declaring rulesets:
To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

Answer 2

In plain css that's the simplest way, if you want to style the 'a' tag for different sections of your app you can use classes or ids, an example using classes is:
HTML
<div class='classOfSomeSection'>
This link is red
</div>
<div class='classOfAnotherSection'>
This link is green
</div>
CSS
.classOfSomeSection a:link{
color:red;
}
.classOfAnotherSection a:link{
color:green;
}
There are other methods involving Javascript to change pseudo classes of specified elements but in my opinion, css is simpler.

Answer 3

If you use SCSS, you can do it by creating a mixin. It seems longer up front, but the upside is that you write the mixin once and then just include it with one line wherever you need it.
// set up vars for each state you want
$link: #00a400; // green
$visited: #870808; // deep red
$hover: #8ee1ff; // blue
$active: #df42f4; //pink
// set up mixin
#mixin link-color($color) {
color: $link;
&:visited {
color: $visited;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
// use mixin
a {
#include link-color($link);
}
Fiddle
So the answer to your question is yes, in that you can write it shorter, and no, in that you have to write something a little bit long somewhere. Ideally, squirrel your mixins away in a file all their own so you they don't clutter your view.