Chained pseudo-selectors in IE8

Question

Chained pseudo-selectors do not seem to work in IE8 on Windows XP. Is there any documentation about this?

I'm developing a website using Selectivizr in order to use CSS3 selectors, but a style such as this doesn't work in IE8, whereas it works everywhere else (unsurprisingly):

span:last-child:after {content: "foobar";}

You're chaining a CSS2 pseudo-element to a CSS3 pseudo-class, not chaining two pseudo-selectors. Still pretty odd, though - do the `span:last-child` or `span:after` rules work in your stylesheet? — BoltClock, Jul 20 '12 at 11:28
Thanks for the correction @BoltClock Thankfully my question was still understood. I've tested and `:last-child` works, but I don't know how to test `:after` by itself. This works in IE9 and WebKit, and I assume in Firefox also. — Daze, Jul 20 '12 at 17:45
You can simply make a rule that says `span:after {content: "test";}` and see if it works in IE8. (It should.) — BoltClock, Jul 20 '12 at 20:31
Sorry, had a long day. Couldn't think straight, I feel stupid now :-s Of course `content` works. `last-child` also works, thanks to Selectivizr. The problem is that they don't work when chained together. I've tested with `first-child` (natively supported by IE8) instead and it works: `p:first-child:after {content: "foobar";}` Therefore, I conclude that it's not working because Selectivizr doesn't support chaining pseudo-elements|classes. Thanks for you help! — Daze, Jul 20 '12 at 20:56
That sounds like a bug, but oh well. I think you can post your last comment as an answer :) You're welcome! — BoltClock, Jul 20 '12 at 20:58

score 1 · Accepted Answer · answered Aug 31 '12 at 18:48

This is not a bug, it's due to the fact the the selector doesn't match natively.

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.

The simple selector in this case is either span:first-child, which matches natively in IE8, or span:last-child, which does not.

One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

Appending :after to span:first-child is a match, while appending it to span:last-child is not, and since Selectivizr is a post-processor, it comes too late to save the day. Perhaps a pre-processor would have better luck.

Chained pseudo-selectors in IE8

1 Answers1

Linked