Stop :active state from propagating to parent

Question

I have a parent container, and a button inside that container. When you click the parent, I want the whole thing to be active and apply a background color to indicate that the click has been registered. However, when I click the child, I want ONLY the child to be active so that the background color is applied only to the child and it is clear where the click has been registered. How do I stop the :active state from propagating to the parent?

Here is an example of what I am trying to do:

HTML

<div class="container">
    <div class="inner-button"> hello </div>
</div>

CSS

.container {
    width: 100%;
    height: 45px;
    border: solid 1px;
}

.inner-button {
    width: 45px;
    height: 30px;
    border: solid 1px;
}

.container:active {
    background-color: #00FF00;
}

.inner-button:active {
    background-color: #FF3300;
}

In this example, I want the whole thing to flash green when you click the outer div, and ONLY the inner div to flash red when it is clicked. Currently the outer div flashes no matter where you click.

Here is the jsfiddle

EDIT: I did try calling stopPropagation() on the event, and it didn't help with the state.

Answer 1

You can't achieve your aim with css with that code but you can make it in his way:

<div class="container">
<div class="ut"></div>
<div class="inner"> hello </div>

Css

.container
{
position:relative;
width:100px;
height:100px;
border:solid thin;
}

.inner
{
position:absolute;
width:35px;
height:35px;
border:solid thin;
z-index:100;
}

.inner:active
{
background:red;
}

.ut
{
position:absolute;
width:100px;
height:100px;
border:solid thin;
}

.ut:active
{
background:green;
}

You can't do it with a container. You should add a division with the same or lower position.

http://jsfiddle.net/fbofpjec/1/

Sorry for grammar.