Combining dynamic pseudo-classes hover & focus fails!




CSS Parsing and Computation
9 years ago
9 years ago


(Reporter: John A. Bilicki III, Unassigned)


Firefox Tracking Flags

(Not tracked)



(1 attachment)

734 bytes, application/xhtml+xml


9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/2009011913 Firefox/3.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/2009011913 Firefox/3.0.6

a:focus:hover {background-color: #000; color: #fff;} defined by the W3C here...

Reproducible: Always

Steps to Reproduce:
Create an element, add the selector, trigger the selector moving your cursor over the anchor element, moving it away from the anchor, and then tabbing to the element to give it focus using the tab key on your keyboard.
Actual Results:  
Nothing happens.

Expected Results:  
The same properties/values should be applied from the same selector.

This is a *MAJOR* oversight as it would help reduce bandwidth overall and make it insanely easy to add keyboard accessibility to EXISTING code.
Component: Disability Access → DOM: CSS Object Model
Product: Firefox → Core
QA Contact: disability.access → general
Works fine here. When I tab focus the link and hover over it, the link changes to white text on black.
Maybe you're thinking that you want:

a:focus, a:hover { ... }

if you want the highlight when focused OR hovered.


9 years ago
Last Resolved: 9 years ago
Resolution: --- → INVALID

Comment 3

9 years ago
Created attachment 364485 [details]
Test Case #1

Did you read the spec? The whole point was not  *NOT* repeat the selector twice for a different pseudo-element. I've attached a test case which does not work in Gecko 1.9.0x and Gecko 1.9.2x.

Comment 4

9 years ago
The spec's wording around the example is a little confusing, but pretty much everyone interprets the spec the same way Firefox does:

It would be strange if pseudo-classes were "or" while everything else (id selectors, class selectors, tag names) were "and".

Comment 5

9 years ago
Gecko (the rendering engine), not Firefox (the program that uses the engine) doesn't implement the standard. It's not if *other* engines interpret it correctly, it's if THIS engine interprets it correctly; it does not.

CSS2 has been around since 1998 and this bug is valid as I have pointed out. The spec is *VERY* clear: it "combines" two pseudo-elements (focus and hover) in to a single selector so to *AVOID* having to *REPEAT* and entire class. This is more then obvious if you read the page and have a proper understanding of CSS.

Comment 6

9 years ago
I disagree, but I guess one of our real CSS experts will need to mark this as invalid rather than me.
Resolution: INVALID → ---

Comment 7

9 years ago
Can you point to the part of the CSS2.1 or CSS3 Selectors spec that led you to thinking what you think?
I think one of two cases is true, either:
1. gecko does it right, or
2. "The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover." should say "The last selector matches A elements that are in pseudo-class :focus *OR* in pseudo-class :hover."

In order to be clear, the spec has to use the words "and" and "or" very carefully.

Comment 9

9 years ago
After the bullet list on the link I'm referencing...

"These pseudo-classes are not mutually exclusive. An element may match several of them at the same time."


"The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover."

"and in" means the selector matches *both* pseudo-classes...and "the last selector" means the selector directly above quoted text.

This is *EXPLICITLY* defined.


9 years ago
Component: DOM: CSS Object Model → Style System (CSS)
QA Contact: general → style-system
First off, better refer to the CSS 2.1 docs
or CSS3 selectors

secondly, the sentence you quote in comment 9
> The last selector matches a elements that are in the pseudo-class :focus and in the pseudo-class :hover.

Note the 'and'. The element must be in both states at the same time for the selector to apply. It is not enough for the element to be focussed for that selector to apply.

As described this bug is invalid.
Last Resolved: 9 years ago9 years ago
Resolution: --- → INVALID
Please note that in the testcase, if you tab to the link and then move the mouse over the focused link, the selector does apply.  This is exactly as it should be.  The selector applies when the link is focused *and* hovered at the same time.
You need to log in before you can comment on or make changes to this bug.