CODEWITHSUNDEEP
css
David19801
David19801

Reputation: 11448

Change all link states same color css

I have a spanned class called "tomato".

My css is:

.tomato a:link {color:#FF0000;}      /* unvisited link */
.tomato a:visited {color:#FF0000;}  /* visited link */
.tomato a:hover {color:#FF0000;}  /* mouse over link */
.tomato a:active {color:#FF0000;}  /* selected link */

Is there a way I can combine all these into a smaller piece of code? (I want the link to be red in all states)

Upvotes: 35

Views: 30514

Answers (3)

systemaddict
systemaddict

Reputation: 363

It is actually best to use the attribute selector. In this case it would be:

.tomato a[href]{color:#F00;}

or if you must:

.tomato [href]{color:#F00;}

Upvotes: 6

talha2k
talha2k

Reputation: 1

This is the shortest, I don't think you can do it any shorter than:

.tomato a:link, .tomato a:visited, .tomato a:hover, .tomato a:active { color:#FF0000; }

OR

.tomato { a:link, a:visited, a:hover, a:active { color:#FF00000; } }

Hope this helps.

Upvotes: 33

Grace Huang
Grace Huang

Reputation: 5679

.tomato a:link,
.tomato a:visited,
.tomato a:hover,
.tomato a:active {
    color:#F00;
}

Note, the color HEX could be abbreviated, too. :)

If you choose to use a CSS framework to organize your CSS such as LESS, it could be much simpler than the above:

.tomato {
   a:link,
   a:visited,
   a:hover,
   a:active {
       color:#F00;
   }
}

Upvotes: 13

Related Questions