css active selector exception for a child element
<p>I have a <code>div</code> with <code>:active</code> selector effect,
this <code>div</code> contains a child little <code>div</code> which contains some buttons</p>

<p>Now -of course- when the parent <code>div</code> is clicked, the <code>:active</code> 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 <code>div</code>, very annoying)</p>

<p>What I want is: the <code>:active</code> effect is to be triggered only when the parent <code>div</code> 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.</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent-div"&gt;
  &lt;div id="child-div"&gt;
    &lt;button&gt;Hello&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>