RE: [css3-selectors] Clarity to :focus?

They are pseudo interaction classes where each interaction has a different meaning.

:hover is well defined to have a behavior which causes your entire parent tree to become hovered as well. This is implied by the hit-test which occurs as hover is linked to your "cursor" location. The hit-test is like a ray-cast to the root of your document and the implication is that if an element is hovered at a specific location then its parent is also hovered. The current implementation of hover is actually questionable. Since hover is linked to a tunneling hit-test you might expect that other elements other than simply your parent chain be hovered. For instance, if you have content underneath of the node but not in its immediate parent chain, it is clearly "hovered" but doesn't gain the state.

:active on the other hand does not have to tunnel to your parent chain. You've obviously tested in a specific browser or set of browsers. Not all browsers propagate active up the parent chain. If you read the specification there is even a limitation on what elements can be activated and the activation is left to the document language (thus HTML) to define. Specifically active was meant to cover the duration during which a link is navigating (not just the duration for which the cursor is held in the down position). It can be extended to the duration during which an element which is able to be activated is performing its action (which is obviously not easy to figure out or define for many things).

:focus is another one just like active. The focused element is the element which will accept the current keyboard input (traditionally). It is specifically one element, not a set of elements or an entire parent chain of elements. Thus focus only applies to a single element.

Justin Rogers [MSFT]

From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Brian Kardell
Sent: Monday, October 10, 2011 9:35 AM
To: www-style@w3.org
Subject: [css3-selectors] Clarity to :focus?

In a fork of a previous thread I mentioned that I was surprised that :focus worked differently than :active and :hover...  Given:

    <div>
        <input class="x"></input>
    </div>

The following rule will make the background of the div yellow when the input is hovered:

    div:hover{ background-color: yellow; }

And this one will make the background of the div red when the input is 'clicked' (not exactly, but you get the idea):

    div:active{ background-color: red; }

But this one will never do anything:

    div:focus{ background-color: blue; }


I think you could make a case whether this is correct behavior or not and rational people could disagree - but given the relationship between and what is in the current drafts/etc it seems in that in the least, this is less clear than it could be.

Is it worth suggesting that it should specify that the three should work similarly in this regard or note specifically how they are different?  Again, I am not making a case for either, just stating that either course would probably improve the situation.