<div class="first">
first <br />
<div class="second">
second <br />
<div class="third">third <br /></div>
</div>
</div>
.first {
background-color:#000;
height:9rem;
width:9rem;
text-align:center;
position:relative;
color:white;
}
.second {
background-color:#666;
height:6rem;
width:6rem;
text-align:center;
position:relative;
left:50%;
top:25%;
transform:translate(-50%,-30%);
}
.third {
background-color:#aaa;
height:3rem;
width:3rem;
text-align:center;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center;
}
let divs = document.querySelectorAll("div");
divs.forEach((div) => {
div.addEventListener("click", clickEvent);
});
function clickEvent(event) {
alert(event.currentTarget.className);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.