CODEWITHSUNDEEP
sassparent-selector
Loran
Loran

Reputation: 852

Call parent from child scss

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?

Upvotes: 0

Views: 499

Answers (1)

robertp
robertp

Reputation: 3662

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

  1. Use a class name on the TD that contains the anchor element
  2. 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/

Upvotes: 1

Related Questions