Re: :click pseudo element

On Mon, Feb 7, 2011 at 10:20, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Feb 7, 2011, at 9:08 AM, Tab Atkins Jr. wrote:
>
>> On Sat, Jan 29, 2011 at 2:19 PM, thomasin a
>> <nevereatredjellybeans@gmail.com> wrote:
>>> In order to fully realise the use of the new CSS3 transformation and transition abilities, I think a :click pseudo element needs to be added, identical to :hover but with the click being the trigger instead. I have noticed a lot of people want it, instead reverting to a few short lines of Javascript when instead you could make a CSS and HTML pure site, with the code being a lot simpler and easy to understand too.
>>>
>>> I hope you've considered this, and will consider it, because it is a Javascript function I use almost every time I program, and it would be a lot easier and useful to have it in CSS as well.
>>
>> The :active pseudoclass is what you want.  On devices that use a
>> mouse, :active matches while you're clicking on the element.  On other
>> types of devices with different interactions, :active matches at the
>> appropriate time.
>>
>> If someone is using js just to change some CSS while people click on
>> something, please tell them to just use :active.  ^_^
>
> It'd be nice to have a way to replicate radio-button behavior. Something like:
>
> a:clicked(odd) { /* on state */ }
> a:clicked(even) { /* off state */ }
>
> ... where only a mouse-up counted as as 'clicked'.
>
> Although it would be better if there was some sort of actual binary state that could be attached to any element and styled.

Right.

Once we start talking about user-meaningful (binary) "states" like
that, we've crossed-over into semantics (meaning of the
document/page/webapp) and much better to keep/leave that in HTML.

However, once such a state is defined in your markup (i.e. the HTML
specification defines when which elements are in on/off states), then
you can use UI Selectors to apply styling to it:

http://www.w3.org/TR/css3-selectors/#UIstates

reworking your sample style sheet:

a { /* off state */ }
a:checked { /* on state */ }

Tantek

-- 
http://tantek.com/ - I made an HTML5 tutorial! http://tantek.com/html5

Received on Monday, 7 February 2011 18:32:38 UTC