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
– BoltClock, Commented Jun 24, 2012 at 23:35

Zoltan Toth · Accepted Answer · 2012-06-24 23:34:43Z

1

Simpler

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

answered Jun 24, 2012 at 23:34

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

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

2 Comments

steveax Over a year ago

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.

BoltClock Over a year ago

@steveax: It also decreases the specificity, potentially making it unbalanced.

Collectives™ on Stack Overflow

CSS selectors and pseudo-classes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related