Opera and IE are not handling css pseudoclasses properly

Question

Problem is very very simple: When clicking on "red red red" in browsers: Chrome 17, FireFox 10, IE 9, Opera 11.61 both elements have been lightened with their appropriate colors.

When clicking on "GREEN" it happens only in Chrome and FF. In IE and OPERA nothing happens. Why?

Demonstration:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.container:active
{
    background: red;
}
.container:active .in
{
    background: green;
}
</style>
</head>
<body>
    <div class="container">
        red<br />red<br />red<br />red<br />red<br />
        <div class="in">GREEN</div>
    </div>
</body>
</html>

Does anyone know any workarounds?

It works in IE8 and 9; earlier versions of IE (7 and below) do not support psuedo-selectors on non-anchor elements, I believe. — Jared Farrish, Mar 02 '12 at 13:02
No, in IE9 it doesn`t work. Please open Demonstration and click on GREEN. I have IE 9.0.8112. Is any possibility we have different IE9 versions? — Roman, Mar 02 '12 at 13:06
Oh, I see; the active selector doesn't fire on child elements. — Jared Farrish, Mar 02 '12 at 13:06
If the browser doesn't allow the click to fall through to an element that contains it, the only solution I can think of is to use Javascript to make browser's perform the same. My own opinion is that IE and Opera are handling it the way I would expect. — Jared Farrish, Mar 02 '12 at 13:13
Yes, it seems like it`s the only way - JavaScript. Thank you — Roman, Mar 02 '12 at 13:17

Mr Lister · Answer 1 · 2012-03-02T13:30:51.440

4

CSS does not define which elements can be "active" and if a parent element of a clicked-on element also becomes "active".

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

So all browsers are behaving according to the specs. Sorry!

If you want a workaround, try using an <a> element instead of the outer <div>. Need more styling then though. And the inner <div> should be an inline element to make sure it remains valid HTML.
Edit: And the <a> also must have a href attribute, otherwise it still won't work in IE. (Can't test on Opera here.)

jsFiddle

edited Mar 02 '12 at 13:30

answered Mar 02 '12 at 13:09

Mr Lister

42,557
14
95
136

The OP is asking for how to work around it not working. Whether or not it's "too spec" I think is beside the point (and really just a comment). – Jared Farrish Mar 02 '12 at 13:14
Like this? http://jsfiddle.net/uYfna/2/ That doesn't work either (I think it actually breaks the `.container:active .in` class selector). – Jared Farrish Mar 02 '12 at 13:18
Can element really contain other elements? – Roman Mar 02 '12 at 13:26
@JaredFarrish Oh, those ``s. I've edited my answer even further, but at least it works now on IE as well as Firefox. (Don't have many other browsers where I'm sitting here.) Also you shouldn't nest `` elements, but you can use any inline element (like `span`) for the inner one to keep the HTML valid. – Mr Lister Mar 02 '12 at 13:28
If you suggest a solution with caveats, you should provide a working example. `:)` Just saying "yeah, I think `` tags will solve it" isn't particularly helpful, and I don't think it really resolves the underlying issue: http://jsfiddle.net/uYfna/5/ – Jared Farrish Mar 02 '12 at 13:30
That last one still doesn't work; it's not firing the `:active` on the `.container` when you click on the inner element. The problem you're facing is something that CSS doesn't do, which is allow [selection of a parent](http://stackoverflow.com/a/1014958/451969). For the browsers that don't assume the `:active` is fired on an inner element `:active`, this is what you would need to be able to do. Javascript is the only way I can see to do that. – Jared Farrish Mar 02 '12 at 13:31
I'm using IE9, and also in browser mode IE8, neither work when clicking the `GREEN` text. IE7 works, granted, but that's a bit of a consolation prize. Also, at least in FF10, it's performance is a bit weird. – Jared Farrish Mar 02 '12 at 13:39
Why? I liked my solution better, as it only used CSS. – Mr Lister Mar 02 '12 at 13:48
Yes, in Mr Lister`s solution clicking on "GREEN" unfortunately doesn`t do anything in IE9, IE8 and Opera 11.60. Also it fires extra GET request. – Roman Mar 02 '12 at 13:58
I see I need to apologise. For some reason, some foolish person who shall remain nameless had put my IE into compatibility view for all sites. So I thought my solution worked, but it really only worked for IE7, as you figured out half an hour ago. Sorry. – Mr Lister Mar 02 '12 at 14:05
Thank you for comment about specs, it cleared out situation and stopped pointless searchings of solution using CSS. – Roman Mar 02 '12 at 14:13

score 2 · Accepted Answer · answered Mar 02 '12 at 13:48

2

I believe you need to use Javascript to handle this, as CSS is not capable of selecting parent elements.

In jQuery:

$(document).ready(function(){
    $('.container .in').mousein(function(){
        $(this).addClass('container_active');
    }).mouseout(function(){
        $(this).removeClass('container_active');
    });
});

http://jsfiddle.net/uYfna/8/

answered Mar 02 '12 at 13:48

Jared Farrish

46,034
16
88
98

Yes, but I don`t see point of waiting for whole page to load, so I edited this a bit. Like so: http://jsfiddle.net/uYfna/18/ – Roman Mar 02 '12 at 14:09

Opera and IE are not handling css pseudoclasses properly

2 Answers2