Is it possible to suppress parent's :active pseudo class?

Question

I have the following markup:

<div class="parent">
  I should change my color to green when clicked
  <div class="element">I should do nothing when clicked</div>
</div>

Here is the related CSS:

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;
}
.parent:active {
  background:green;
}
.element {
  background:blue;
}

Is there any way to prevent triggering .parent's :active pseudo class when .element is clicked? Tried e.stopPropogation() when .element is clicked with no luck. demo

Answer 1

You can just use jQuery instead of :active, like in this demo (link).

$('.element').mousedown(function(e){
  e.stopPropagation();
});

$('.parent').mousedown(function(e){
  $('.parent').css('background', 'green')
    }).mouseup(function(e){
  $('.parent').css('background', 'red')
});