<div id="grandParent">
GrandParent
<div id="parent">
Parent
<div id="child">Child</div>
</div>
</div>
body {
font-family: sans-serif;
}
#grandParent {
padding: 20px;
background-color: green;
display: flex;
}
#parent {
padding: 20px;
background-color: yellow;
}
#child {
padding: 20px;
background-color: blue;
}
a {
margin: 0 10px;
color: blue;
}
document.querySelector('#grandParent').addEventListener('click', () => {
console.log('GrandParent click');
});
document.querySelector('#parent').addEventListener('click', () => {
console.log('parent click');
});
document.querySelector('#child').addEventListener('click', () => {
console.log('Child click');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.