207028 - Combining pseudo classes as in :after:hover non functional (ditto :before and :focus, etc.)

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Joshua Prowse]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6

The following CSS (as an example) should write the word "example" after elements
with class "sample."  When the word "example" is hovered over, said word should
become pink.  

div:after {content:"example"}
div:after:hover {color:pink;}

Reproducible: Always

Steps to Reproduce:




Note that reversing the pseduo-classes, as in

div:after {content:"example"}
div:hover:after {color:pink;}

works as expected, causing the word "example" to become pink when the element
with class "sample" is hovered over

Comment 1

[Hixie (not reading bugmail)]

:after isn't a pseudo-class, it's a pseudo-element, and pseudo-elements must
come last in the selector.

INVALID.

Comment 2

[dolphinling]

Hixie: I don't see "pseudo-elements must come last" in any of the specs. Can you
provide a pointer? 

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

CSS1, section 2.5:

When combined with classes or pseudo-classes, pseudo-elements must be specified
at the end of the selector. Only one pseudo-element can be specified per selector.

CSS2.1, section 5.2:

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. 

Comment 4

[dolphinling]

Oh, okay, I was looking in the wrong place. I also see it in css3-selectors
section 4. 

Thanks.