change color of outer div by clicking on inner div (only css and html)

Question

I have a nested div, one inside another, like this:

<div class="outer">
    <div class="inner">
    </div>
</div>

something like this:

and I want to change the color of outer div by clicking on inner div, is that possible at all?

**

only by html and css, no javascript!

**

Answer 1

Why not? Of course it's possible. You can define addEventListener for the inner DOM, and set the color to style.background inside click function.

document.getElementsByClassName("inner")[0].addEventListener('click', function() {
  document.getElementsByClassName("outer")[0].style.background = 'yellow';
});

.outer {
  width: 100px;
  height: 100px;
  text-align: center;
}

.inner {
  width: 50px;
  height: 50px;
  margin: auto;
  background: green;
}

<div class="outer">
    Outer
    <div class="inner">
        Inner
    </div>
</div>

Answer 2

You can use the parentElement property to modify .outer style like this:

    document.querySelectorAll('.inner')[0].addEventListener('click', function(){
        this.parentElement.setAttribute('style', 'background-color: blue;');
    });

.outer {background-color: pink; height: 400px;}
.inner {background-color: yellow; width: 50%; height: 50%; margin: auto;}

<div class="outer">
    <h1>Outer</h1>
    <div class="inner">
        <h2>Inner</h2>
    </div>
</div>

Read more about parentElement on MDN