CSS: How can I change background of a child in response to a hover event on parent?

Question

I have this case where I have a <span> element containing text AND. The <span> has a background: black.

On hovering its .parent class, I want background of the span to match that of the parent when .parent is hovered (i.e. #eee).

I read about :host-context and used it as shown in snippet below but it is not seem to be working. I even used SCSS in jsfiddle (link) but still no luck.

Is there a way to set background of child .text when the parent or great grand parent .parent is hovered?

.line {
    text-align: center;
    border-bottom: 1px solid gray;
    line-height: 0.1em;
    width: 100%;
    margin: 10px 0 20px;
}
.text {
    color: green;
    background: black;
    padding: 0 10px;
}

.parent {
  background: #000;
  display: flex;
  align-items: center;
  height:100px;
}


.parent:hover {
  background: #eee;
}

:host-context(.parent:hover) {
  .text {
    background: #eee;
  }
}

<div class="parent">
  
  <div class="line" style="">
    <span class="text">AND</span>
  </div>
</div>

Answer 1

Just use .parent:hover .text as a selector: It is applied to .text within .parent when .parent is hovered.

.line {
    text-align: center;
    border-bottom: 1px solid gray;
    line-height: 0.1em;
    width: 100%;
    margin: 10px 0 20px;
}
.text {
    color: green;
    background: black;
    padding: 0 10px;
}

.parent {
  background: #000;
  display: flex;
  align-items: center;
  height:100px;
}


.parent:hover {
  background: #eee;
}

.parent:hover .text {
  background: #eee;
}

<div class="parent">
  
  <div class="line" style="">
    <span class="text">AND</span>
  </div>
</div>