CODEWITHSUNDEEP
htmlcsscss-selectors
pnichols
pnichols

Reputation: 2278

Is it correct to combine active and hover pseudo selector like a:active:hover.?

I've seen this somewhere, but I can't find more info telling me if it's correct:

.selector a:active:hover { color: #777; }
.selector a:hover:active { color: #777; }

I don't remember which one of the 2 it was.

But either way, Firefox doesn't seem to like it and does nothing.

Was it another example of a tutorial showing bad practice.??

Upvotes: 5

Views: 26426

Answers (3)

A Helper
A Helper

Reputation: 21

Should be

a.selector:active:hover { color: #777; }

a.selector:hover:active { color: #777; }

NOT

.selector a:active:hover { color: #777; }

.selector a:hover:active { color: #777; }

Simple as that :P

Upvotes: 0

Quentin
Quentin

Reputation: 944555

Both are fine (and identically equivalent). I've just tested in Firefox 4.0b6/Mac and it works exactly as I would expect. In the below example, the link turns red when I point at it, and then green while I hold the mouse button down.

<!DOCTYPE HTML>
<title>Test</title>
<style>
a:hover { color: red; }
a:active { color: yellow; }
a:hover:active { color: green; }
</style>
<h1><a href="test">gggg</a></h1>

It is unusual to want a link to be styled differently when activated with the mouse than with the keyboard though.

I suspect you may be making a classic mistake. :active means "While being activated (e.g. while the mouse button is depressed over it)" and not "When the href attribute's value resolves to the URI of the current page".

There is no pseudo-class that means "When the href attribute's value resolves to the URI of the current page", for that the classic pattern is to add a "current" or "selected" class to the anchor on the server before sending the HTML to the client.

Upvotes: 9

Jeremy B.
Jeremy B.

Reputation: 9216

it is not correct and will not work, you need to separate them out.

.selector a:active, .selector a:hover { color: #777; }

Upvotes: -4

Related Questions