-2

Update: Thanks to explanations by Crowes and Boltclock below, I now have a clearer understanding that CSS pseudo-classes are explicitly stative (ie. describing an element's state in the present moment).

While there is a chronological dimension to javascript events, CSS pseudo-classes are, by contrast, either true in the present moment or false.

Consequently, unlike the javascript events they superficially resemble, CSS pseudo-classes do not (and cannot) refer back to the user's previous interactions with that element.

This makes my question largely redundant.

In 2017, it's a great surprise that while CSS has had :hover for decades it still lacks that pseudo-class's most obvious complement - :click.

I have searched Stackoverflow and in this Nov 2012 question:

Can I have an onclick effect in CSS?

The highest rated answer:

use :active

is not a very good substitute for onclick - if anything :active is actually a substitute for onmousedown.

The second highest rated answer -

use the checkbox hack

is not semantic (and... as hacks go, it feels pretty hacky).

So. Is there a minimum effort pure CSS replacement for javascript's onclick?

Community
  • 1
  • 1
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 3
    1) :hover is a pseudo-class, as you've correctly tagged. "Pseudo-element" and "pseudo-class" are not interchangeable 2) How would :click even work? If it represents an element that is clicked, then it would be so instantaneous that you would never be able to see the styles you've applied in a rule containing that pseudo-class. It's no surprise at all that such a pseudo-class doesn't exist, because it simply makes no sense. – BoltClock Feb 06 '17 at 15:14
  • 1
    See also [Does CSS have a :blur selector (pseudo-class)?](http://stackoverflow.com/questions/11703241/does-css-have-a-blur-selector-pseudo-class) – BoltClock Feb 06 '17 at 15:18
  • Thanks for highlighting my typo, @BoltClock. Yes, I did mean _pseudo-class_. Corrected. – Rounin Feb 06 '17 at 15:18
  • After reading your _"dynamic pseudo-classes represent states"_ explanation in the question you linked to above, I can better understand your question _"How would_ `:click` _even work?"_ My answer would be that `:click` would represent `:has-been-clicked` rather than `:is-being-clicked` (which if I'm not wrong, ***is*** what `:active` represents after all). But I understand that `:has-been-clicked` isn't analogous to the state `:is-being-hovered-over`. – Rounin Feb 06 '17 at 15:27
  • Possible duplicate of [Can I have an onclick effect in CSS?](http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) – nicovank Feb 06 '17 at 15:32
  • 1
    That does make more sense. As unsemantic as it is, the checkbox hack is as close as you can get. There is a reason why it's still relevant in 2017. Even I've deigned to use it, and I'm not sure I'm all too happy about it. – BoltClock Feb 06 '17 at 15:43
  • I really have a different way of thinking about all this, thanks to your explanation that _pseudo-classes represent states, not events_. If the checkbox hack _really were_ a pseudo-class, it would be something like `:nth-of-times-clicked(odd)`. – Rounin Feb 06 '17 at 17:43

1 Answers1

0

Is there a minimum effort pure CSS replacement for javascript's onclick?

Yes, there is a straightforward way to implement onclick behaviour using CSS alone.

Two steps:

  1. Add tabindex="0" to the element which requires the onclick behaviour
  2. Use the :focus pseudo-element to activate the onclick behaviour

Example:

p {
width: 100px;
height: 100px;
margin: 0;
line-height: 100px;
font-size: 16px;
text-align:center;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
font-weight: bold;
cursor: pointer;
transform: rotateY(0deg);
transition:
    width 1s ease-out,
    font-size 1s ease-out,
    line-height 2s ease-out,
    height 1s ease-out 1s,
    transform 1s ease-out 2s;
}

p::after {
content:' Me';
}

p:focus {
width: 300px;
height: 200px;
line-height: 200px;
font-size: 36px;
transform: rotateY(360deg);
}

p:focus::after {
content:' Elsewhere';
}
<p tabindex="0">Click</p>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 2
    This won't hold state. You're simply giving it the opportunity to transition by using a focus event. Hardly a "click" event, which is supposed to allow the element to stay as-is, not cancel upon exit. – Joshua Feb 06 '17 at 15:13
  • Yes, you're right! It won't hold state. That's an excellent point, @Crowes. So... this `:focus` technique isn't really a substitute for `onclick` either. – Rounin Feb 06 '17 at 15:22