htmlcsscursorpseudo-class

Change cursor after two clicks using only html and css?

I know I can change the cursor with one click with the following CSS code:

#slide-arrow-prev:active {
    cursor: not-allowed;
}

Is there anyway to change a cursor after two clicks using only html and css? I'm curious if I can do it without using javascript. If so, how please. Thank you

Solution

  • If you are determined to not use JS, you can achieve this by having a child as a focusable element inside the parent and disabling it's pointer-events after the first click. Here is an implementation:

    #slide-arrow-prev{
  height: 50px;
  width: 80px;
  background: lavender;
}

#inner {
  height: 100%;
  width: 100%;
}

#slide-arrow-prev:focus{
  cursor: not-allowed;
}

#inner:focus {
  pointer-events: none;
}
    <div tabindex=0 id="slide-arrow-prev">
  <div tabindex=0 id='inner'>
    Click Me
  </div>
</div>