Call parent from child scss

Question

I have <td> and inside this also have <a>.

eg.

<td>
     <a>test</a>
</td>
<td>

</td>

At first <td> only have <a>. Rest don't have <a>. My requirement is I want to highlight <td> tag when hovering that exist <a>.

So Only first td will change highlight when hover.

My Code=>

td{
      
      $this:&;

      &:hover {
        a {          
          #{$this} & {
            background-color: blue;
          }
        }
      }
    }

but this code is not working. What Am I missing?

Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Arkellys, Mar 26 '21 at 06:40
@Loran: `has()` is still part of 'Selectors Level 4 Working Draft' which means: it is planned MAYBE to be introduced sometimes in the yet unkown future ... which means that you can use it for projects because of browser support about two years after (if!) it will have been introduced. You can check the support on yourself: https://caniuse.com/?search=has(). Is there a reason you mind the recommended JS solution? — Brebber, Mar 26 '21 at 07:43
@robertp, Thanks for your answer, Looks like your answer is work but I am not testing yet with my code. I will make it answer later. again thank u. — Loran, Mar 29 '21 at 09:30

score 1 · Accepted Answer · answered Mar 26 '21 at 22:21

As there is no parent selector in CSS, you have 2 viable options.

Use a class name on the TD that contains the anchor element
Use the link's &::after pseudo element to apply the styling

Option one is a lot more flexible and offers more possibilities.

SCSS code:

$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;
  }
}

I set up a JSFiddle demo: https://jsfiddle.net/robertp/409un7hf/

Call parent from child scss

1 Answers1