SO-66811730

https://stackoverflow.com/questions/66811730/call-parent-from-child-scss

HTML

<h2>
Example #1 - TD contains link only
</h2>
<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
      <td><a href="#">This is a link</a></td>
      <td>This is the last cell</td>
    </tr>
  </tbody>
</table>
This solution can work if the content of the cell is limited to the one anchor tag.
<hr>
<h2>Example #2 - TD contains a partial link</h2>
<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
      <td>This one contains a <a href="#">link</a></td>
      <td>This is the last cell</td>
    </tr>
  </tbody>
</table>
This solution is limited due to some of the text is outside the anchor element.
<hr>
<h2>Example #3 - TD uses class name for styling</h2>
<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
      <td class="td-with-link">This one contains a <a href="#">link</a></td>
      <td>This is the last cell</td>
    </tr>
  </tbody>
</table>
This solution is more flexible.
<hr>

SCSS

$col-blue: blue;
$col-yellow: yellow;

td {
  position: relative;
  padding: 10px;
  border: 1px solid $col-blue;

  // Option 1 - uses td for hover and pseudo element for styling
  &>a {
    &::after {
      content: "";
      position: absolute;
      display: none;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: $col-blue;
      z-index: -1;
    }
  }

  &:hover {
    &>a {
      color: $col-yellow;

      &::after {
        display: block;
      }
    }
  }
}

// Option 2 - apply class name to TD with link
.td-with-link {
  &:hover {
    color: $col-yellow;
    background: $col-blue;
  }
}