css active selector exception for a child element [duplicate]

This question already has an answer here:

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

I have a div with :active selector effect, this div contains a child little div which contains some buttons

Now -of course- when the parent div is clicked, the :active effect will be triggered, but also when one of the buttons inside the child-div is clicked the same thing happens, which is what I don't want, (it feels like the guest has clicked both the button and the parent div, very annoying)

What I want is: the :active effect is to be triggered only when the parent div is clicked, not when one of the elements inside a child-div is clicked. Is it possible? I don't mind using JS or jQuery.

In the following example, the border goes red whether I click on the div or the button inside it:

#parent-div {
  border: 1px solid black;
  width: 300px;
  height: 300px;
}
#parent-div:active {
  border: 3px solid red;
}
#child-div {
  position: absolute;
  top: 20px;
  left: 20px;
}

<div id="parent-div">
  <div id="child-div">
    <button>Hello</button>
  </div>
</div>