Solved

Stacking css pseudo class selectors and pseudo elements

Posted on 2015-02-22
5
92 Views
Last Modified: 2015-02-26
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!
0
Comment
Question by:Mikkel Sandberg
  • 3
  • 2
5 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40625365
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
 
LVL 6

Author Comment

by:Mikkel Sandberg
ID: 40626036
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40626112
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
 
LVL 6

Author Comment

by:Mikkel Sandberg
ID: 40626155
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
 
LVL 6

Author Comment

by:Mikkel Sandberg
ID: 40634005
I meant to do this sooner, but I'm closing this out.
Thanks Chris!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Most reliable mobile browser emulator? 3 63
This code tracks birthdays 3 60
Autoprefixer and text editors 1 25
tag title an image 13 22
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now