I doubt that the pseudo-class :has will ever be included in stylesheets. If browsers do decide to add it, it will probably only be for JavaScript APIs like querySelector.

On the other hand, I am more optimistic about the :focus-within pseudo-class, which seems easier to implement.

#parent:active:not(:focus-within) {
  background-color: red;
}

Essentially, this rule will prevent the :active state from being applied to #parent when a focusable element like a button is clicked. You can make other elements focusable by adding tabindex="-1"

Unfortunately, :focus-within is not widely supported, but you can use a JS polyfill from here.

#parent {
  border: 1px solid black;
  width: 300px;
  height: 300px;
}
#parent:active:not(.focus-within) {
  background-color: red;
}

<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent">
  <button>Click me</button>
  <p tabindex="-1">Or me</p>
</div>

GitHub prohibits hotlinking, so the code snippet above may not work unless you host the polyfill on your own server and reference it accordingly.

If you're determined to tackle this challenge using only CSS:

When your button is in an active state, include a :before pseudo-element and apply position: absolute; to give it the same background as its parent.

button:active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    z-index: -1;
}

All that's required now is for the parent to have:

position: relative;
z-index: 0;

See it in action: http://jsfiddle.net/s0at4w4b/4/

This doesn't address the root problem, but serves as a resolution for your immediate issue.

One of the easiest ways to achieve the desired outcome is by ensuring that the button is not placed within the specific div you are trying to prevent from being activated.

In this scenario, there is a container div that holds a background div, which acts as the parent element in relation to the original example. The background div has its own active state distinct from that of the button.

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  background-color: #eee;
}
.background:active {
  background-color: red;
}
button {
  position: relative;
}

<div class="container">
  <div class="background"></div>
  <button>Click me!</button>
</div>

Trying out this method may or may not yield the desired results for you, but here is how I accomplish it using solely CSS. It's important to note that this approach relies on the focus-within property, which unfortunately is not supported by IE or Edge browsers.

.parent {
  transition: background-color;
}
.parent:active:not(:focus-within) {
  background-color: red;      
  transition-delay: 1ms; // Introducing a delay to allow child element to focus 
}

In essence, what happens here is that both the parent and the clicked child elements receive an active state. However, the key difference lies in the fact that the focus is applied to the child element only in the subsequent cycle. To prevent any conflicting animations during this transitional period, a minimal delay of 1ms is added. In the following cycle, the element becomes active with the focus shifted to the child, thereby bypassing the transition in the parent element. A similar approach can be taken with animation delay: 1ms.

An alternative technique involves assigning a tabindex=-1 attribute to the item:

.parent {
  transition: background-color;
}
.parent:active:focus {
  background-color: red;      
}

The downside to this method is its potential impact on keyboard navigation behavior and reliance on specific HTML attributes. For cases where keyboard navigation is required, consider using tabindex=0 or any value other than -1, without involving JavaScript.

While there are polyfills available for focus-within to cater to IE/Edge compatibility, implementing those would go beyond the realm of "CSS Only".

However, combining both techniques leads to the following solution:

.parent {
  transition: background-color;
}

.parent[tabindex]:active:focus {
  background-color: red;
}

.parent:active:not(:focus):not(:focus-within) {
  background-color: red;
  transition-delay: 1ms;
}

This combined approach is functional across IE11, Edge, and Chrome.

http://jsfiddle.net/s0at4w4b/42/

Instead of relying on the css pseudo class :active, a jquery solution can be implemented for this scenario.

$(document).ready(function() {
    $('button').mousedown(function(e){
        e.stopPropagation();
        console.log('Clicked successfully');
    });

    $('div').mousedown(function(e){
        $('div').css('background', 'red')
    }).mouseup(function(e){
        $('div').css('background', '#eee')
    });
    $(document).mouseup(function(e){
        $('div').css('background', '#eee')
    });
});

div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>Click Here</button>
</div>

From my understanding, the active state in CSS will propagate upwards to all parent elements. This means that all parent nodes will end up with an active state as well.

Thus, I am not aware of a pure CSS solution for this issue. To avoid using JavaScript (which seems to be your goal), you could restructure the HTML so that the div containing the active state is no longer a parent of the button. Instead, you could make them siblings within the DOM structure.

The next step would be to adjust the CSS layout to ensure that the visual appearance remains consistent despite the change in hierarchy from parent-child to sibling elements.

Without having a sample code snippet or fiddle to reference, it's difficult for me to provide a more tailored solution at this time. Feel free to share more details if needed!

give this a shot

html:

<div class="active" id="current">
  <button id="clickmebtn" >Click Here</button>
</div>

css styling:

div {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  border: 1px solid #333;
}
.active{
  background-color: green;
}

jquery code:

$("#clickmebtn").click(function(){
    $("#current").toggleClass("active");
});

JSFiddle Demo

note: make sure to include the jquery library file

The :active pseudo-class is used when an element is in the process of being activated by the user, such as when the mouse button is pressed and released. It only applies to the primary or main activation button on systems with multiple mouse buttons, like the "left" button.

Some elements may have restrictions on becoming :active based on the document language or implementation. For example, [HTML5] provides a list of elements that can be activated.

If an element matches :active, its parent element will also match :active. This means

Try using div:active:not(:hover) {...} instead of div:active {...}, this way the background-color will remain unchanged.

(previous code snippet has been removed)

UPDATE

In order to maintain the original behavior of the main div and take a more generic approach, I usually create multiple layers.

Take a look at the example below, the toggling to green is simply for demonstration purposes while the use of position and absolute is temporary:

#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
}

<div id="layer-btns">
  <button>Click me</button>
  <br/>
  <button>Click me too</button>
  <br/>
  <button>Click me three</button>
</div>

<div id="layer-data">
  some data-layer
</div>

No CSS solution seems to be available for this scenario at the moment (CSS4 possibilities are uncertain, as suggested by Amit.) Instead, here is a JQuery approach.

The concept involves handling mousedown and mouseup events at three different levels:

1. the parent div
2. the button where you wish to prevent the active state from affecting the parent div (".btn1" in the below example)
3. any other children excluding the button mentioned in the second condition (".btn2" in the following example).

JS Fiddle

HTML:

<div>
  <button class="btn1">Qlick me1</button>
  <button class="btn2">Qlick me2</button>
</div>

JQuery:

$(function(){
    $('div').each(function(e){
        $(this).mousedown(function(e){
            $(this).addClass("activeClass");
        }).mouseup(function(e){
            $(this).removeClass("activeClass");
        });
    });
    $('div .btn1').each(function(e){
        $(this).mousedown(function(e){
            e.stopPropagation();
        }).mouseup(function(e){
            e.stopPropagation();
        });
    });
    $('div :not(.btn1)').each(function(e){
        $(this).mousedown(function(e){
            $(this).parent().addClass("activeClass");
        }).mouseup(function(e){
            $(this).parent().removeClass("activeClass");
        });
    });
});

CSS:

div {
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px solid black;
}
.activeClass {
  background-color: red;
}

Utilizing CSS pseudo-elements can be incredibly beneficial as they enable us to effortlessly create CSS triangles for tooltips and carry out various simple tasks without the need for extra HTML elements. Up until now, these pseudo-element CSS properties have remained inaccessible by JavaScript, but a new method has emerged that allows for their utilization!

Have a look at this:

http://davidwalsh.name/pseudo-element

http://davidwalsh.name/ways-css-javascript-interact