(CSS) How to Shorten CSS code

Question

How do I shorten this code without compromising their function?

.taster a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

.contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

I would appreciate it if you could help me out with this one.

This question would probably be better suited for the Code Review StackExchange site. — Chris W.
– Chris W., Commented Dec 2, 2014 at 19:38
yeah I did. Currently, I'm shortening by CSS code, particularly this one. If I attach the matching elements to .taster , .contact a:link , a:visited, it doesn't work anymore — apple
– apple, Commented Dec 2, 2014 at 19:40

lante · Accepted Answer · 2014-12-20 12:19:51Z

5

Join matching styles for different selectors with a ,

.taster a:link, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover, .contact a:hover, a:active {
    font-size: 120%;
    color: #000000;
}

Or if you want it even smaller, try with a minifier.

edited Dec 20, 2014 at 12:19

answered Dec 2, 2014 at 19:42

lante

7,3924 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Peckory Over a year ago

a:visited and a:active are global, not part of the .taster or .contact

lante Over a year ago

same as the original question :)

Fatih Mert Doğancan Over a year ago

Minifier just remove spaces. Is there tool for your made it ?

Alin · Accepted Answer · 2014-12-02 19:50:54Z

2

This is all:

.taster a:link, 
.taster a:visited,
.contact a:link, 
.contact a:visited {
  text-decoration: none; 
  color: #FFFFFF;
}

.taster a:hover, 
.taster a:active,
.contact a:hover,
.contact a:active {
  font-size: 120%;
  color: #000000;
}

edited Dec 2, 2014 at 19:50

answered Dec 2, 2014 at 19:38

Alin

1,2285 gold badges22 silver badges48 bronze badges

2 Comments

Paul Roub Over a year ago

Note that this shares the original post's bug (a:visited is being targeted globally -- twice -- when OP probably means .taster a:visited and .contact a:visited; same with a:active)

Alin Over a year ago

@PaulRoub missed that, an edit will be made :) Thanks for pointing it out :)

Karolína Vyskočilová · Accepted Answer · 2014-12-02 19:54:13Z

1

.taster a:link, .taster a:visited, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , .taster a:active, .contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

or you can add it different (or one more) class for example "link" (for the first) and "hover" (for the second)

.link a:hover , a:active {
    font-size: 120%;
    color: #000000;
}    
.hover a:link, a:visited{
    text-decoration: none; 
    color: #FFFFFF;
}

edited Dec 2, 2014 at 19:54

answered Dec 2, 2014 at 19:41

Karolína Vyskočilová

1,3151 gold badge19 silver badges33 bronze badges

2 Comments

Alin Over a year ago

Why would you do it like ".link a:hover , a:active" ? Maybe he wants to target only the links inside a taster and contact class...

Karolína Vyskočilová Over a year ago

Right, it depends how it is done - if he is going to use it more than once, twice. For example building complex theme with some parts black and whites with two looks of links, I would use this instead - just writing my links or whatever and add to it correct css without any need to go to styles and add the particular element while coding the site. Because if there will be more classes that will start to be bit long and hard to change it.

Collectives™ on Stack Overflow

(CSS) How to Shorten CSS code

3 Answers 3

3 Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Related