tags:

views:

47

answers:

3

Below is the css for a text link in 4 different states - link,visited,hover, and active.

Do I need to do this css code for every type of link class I have, some of the classes do not even change the appearance. (link,visited,hover,active) If only the appearance of a text link changes for hover and link would I only need the classes below for those 2 or should I still use all 4?

<style>
a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:visited {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:hover {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    border-bottom:1px dotted #000000;
}
a.comment_mod:active {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
</style>
+1  A: 

You can use:

a.comment_mod {
   ... defaults ...
}

a.comment_mod:active {
  ... only things that change ...
}
+3  A: 

If there is no change between :link and :visited, you can omit the latter. Same if :hover and :active are the same. Then just define the commeon parts in :link and override what you want changed in :hover:

a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}

Edit: if you want :active (which is the style when the mouse button is down on the link) to look like :link, then specify both together. If you don't specify it, it will look like :hover. So to match your original styling:

a.comment_mod:link,
a.comment_mod:active
{
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}
Ölbaum
great thanks
jasondavis
+2  A: 

First off, if all of your states share a common styling, you can just declare that style like so

a.comment_mod 
{
 font-family: arial;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
}

If a state changes the styling from the norm, then you declare it.

a.comment_mod:hover
{
 color: #000;
 border-bottom:1px dotted #000000;
}

You can declare the styling for multiple elements at the same time,if they share styles:

a.comment_mod:hover, a.other_mod:hover
{
 color: #000;
}
Joseph Carrington