CSS: Prevent parent element getting :active pseudoclass when child element is clicked

Question

JSFiddle

When you click the button, you see that :active pseudoclass is triggered for the parent div. Is ther

Answer 1

Instead of div:active {...} you should code div:active:not(:hover) {...} and the background-color stays untouched.

(old snippet removed)

UPDATE

To keep the main div behaviour intact and a more generic approach I usually create several layers.

Check the snippet below, toggling to green is just to prove that it works while position and abolute are just quick and dirty for now:

#layer-data {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}
#layer-data:active {
  background-color: red
}
#layer-btns:active {
  background-color: green
}
#layer-btns {
  z-index: 1;
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  padding: 5px;
  width: auto;
  height: auto
}
#layer-data {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 200px
}

  Qlick me
  

  Qlick me too
  

  Qlick me three



  some data-layer