CSS selectors and pseudo-classes

Question

Say for example I have the following styles:

#HorizNav ul li a.active:link { background-color: #FFF; }
#HorizNav ul li a.active:visited { background-color: #FFF; }
#HorizNav ul li a.active:active { background-color: #FFF; }
#HorizNav ul li a.active:hover { background-color: #FFF; }

If all the styles are the same, then how would I group these styles together?

Would it be like this?

#HorizNav ul li a.active:link, a.active:visited, a.active:active, a.active:hover { }

What if you ditched the pseudo-classes altogether? (`:hover` should come before `:active` by the way.) — BoltClock, Jun 24 '12 at 23:35
See [this answer](http://stackoverflow.com/a/7371846/106224). — BoltClock, Jun 24 '12 at 23:42

score 1 · Accepted Answer · answered Jun 24 '12 at 23:34

1

Simpler

#HorizNav ul li a.active { background-color: #FFF; }

answered Jun 24 '12 at 23:34

Zoltan Toth

46,981
12
120
134

I'd guess that you really don't need that much specificity and `#HorizNav a.active { background-color: #FFF; }` would suffice and increase the speed of the selector. – steveax Jun 24 '12 at 23:51
@steveax: It also decreases the specificity, potentially making it unbalanced. – BoltClock Jun 25 '12 at 16:58

CSS selectors and pseudo-classes

1 Answers1