<section onclick="alert('section 태그가 눌렸어요')">
  section : 여기를 눌러보세요
  <ul onclick="alert('ul 태그가 눌렸어요')">
    ul : 여기를 눌러보세요
    <li onclick="alert('li 태그가 눌렸어요')">
      li : 여기를 눌러보세요
      <p onclick="alert('p 태그가 눌렸어요')">P태그 입니다. : 여기를 눌러보세요</p>
    </li>
  </ul>
</section>
* {
  box-sizing: border-box;
  color: #fff;
}
ul {
  list-style: none;
}

section {
  padding: 30px;
  background: #2A3882;
}

ul {
  padding: 30px;
  background: #6D3AA0;
}

li {
  padding: 30px;
  background: #B6A930;
}

p {
  padding: 30px;
  background: #9B5031;
  color: #000;
}

.clicked {
  background: red !important;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.