How to apply border-shadow on a parent and child element with Hover?

Question

I’m taking a CSS course and I came up with this question:

How do I apply the same border-shadow to the parent element (.plan-highlighted) and the child element (.plan__annotation) when hovering the mouse over the parent element?

<article class="plan plan--highlighted">
          <h1 class="plan__annotation">RECOMMENDED</h1>
          <h1>PLUS</h1>
          <h2>$29/month</h2>
          <h3>For ambitious projects.</h3>
          <ul>
            <li>5 Workspaces</li>
            <li>Unlimited Traffic</li>
            <li>100GB Storage</li>
            <li>Plus Support</li>
          </ul>
          <div>
            <button>CHOOSE PLAN</button>
          </div>
          </article>

CSS

  `.plan--highlighted {
  background: #19b84c;
  color: white;
  border-radius: 4px 4px 4px 4px;}`

 `.plan--highlighted:hover {
  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);}`

 `.plan__annotation {
  background: #ffffff;
  color: #19b84c;
  font-style: bold;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
  padding: 8px;}`

Answer 1

Just add a new rule to .plan--highlighted:hover adding the child element class that you want to apply the same property:

.plan--highlighted:hover, 
.plan--highlighted:hover .plan__annotation { /* hover na classe do elemento filho */
  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.5);
}