Stacking css pseudo class selectors and pseudo elements

Hey Experts,
I'm wondering how "stackable" css class selectors and pseudo elements are. For example, I'm trying to have a hover effect on selected text. This fiddle has a simple example: http://jsfiddle.net/3nfj6Ltv/
The desired effect in this case would be the background color of the selected text to be orange and the text color to be green, but then on hover the text color changes to red. However, in my example the text stays red. Is this possible with css alone, or would I have to use Javascript/jQuery? I imagine that event handlers would make this easier.
I've never tried to do anything like this before, but anything for the client, am I right? Haha.
Thanks!
LVL 7
Mikkel SandbergFront End Developer (Contract)Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
I doubt you're going to get consistent results using this. The selection pseudo element was discussed and considered for CSS3, but then dropped, so it's not an official part of CSS anymore. It may work partly in some browsers, and not at all in others. Use at you own risk. Your code, for example, doesn't work at all in FireFox!!

As for generally stacking classes and pseudo elements, they're as stackable as you want them to be.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mikkel SandbergFront End Developer (Contract)Author Commented:
So using Javascript may be the way to go in this instance? Or is there some other CSS trickery I can use to accomplish this?
0
Chris StanyonWebDevCommented:
I'm not aware of any CSS that can do what you're after.

As for JS, I'm sure it can be done. There's probably already code out there, or even a plugin for something like jQuery. You may need to build your own solution.

Not much more I can say really...
0
Mikkel SandbergFront End Developer (Contract)Author Commented:
Ok. I'll give it another day to see if anyone else has input. Otherwise, I'll give you all the points and close out this question.
0
Mikkel SandbergFront End Developer (Contract)Author Commented:
I meant to do this sooner, but I'm closing this out.
Thanks Chris!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.