transition and important rule

hover to see the text fade to red

HTML

<div class="parent">
  Level 1
  <div>
    Level 2
    <div class="child">
      Level 3 (!important means this should become red on hover)
    </div>
  </div>
</div>

CSS

div {
  font-size: 3rem;
  text-indent: 1rem;
}
.child {
  color: blue;
}

.parent {
    transition: all 2s ease-out;
}

.parent:hover {
  color: red !important;
}