:touch CSS pseudo-class or something similar? :touch CSS pseudo-class or something similar? javascript javascript

:touch CSS pseudo-class or something similar?


There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I would think.

Order on the :active/:hover pseudo class is important for it to function correctly.

Here is a quote from that above link

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

  • The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
  • The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
  • The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).


Since mobile doesn't give hover feedback, I want, as a user, to see instant feedback when a link is tapped. I noticed that -webkit-tap-highlight-color is the fastest to respond (subjective).

Add the following to your body and your links will have a tap effect.

body {    -webkit-tap-highlight-color: #ccc;}


I was having trouble with mobile touchscreen button styling. This will fix your hover-stick / active button problems.

body, html {  width: 600px;}p {  font-size: 20px;}button {  border: none;  width: 200px;  height: 60px;  border-radius: 30px;  background: #00aeff;  font-size: 20px;}button:active {  background: black;  color: white;}.delayed {  transition: all 0.2s;  transition-delay: 300ms;}.delayed:active {  transition: none;}
<h1>Sticky styles for better touch screen buttons!</h1><button>Normal button</button><button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button><p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p><p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>