CODEWITHSUNDEEP
sass
Hary
Hary

Reputation: 5818

SCSS Parent Selector not applying styles to the parent based on the child

I am trying to apply a class on the parent based on the child and it doesn't seem working.

Html

<ul>
    <li class="nav-item">
        <a class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link">Profile</a>
    </li>
</ul>

scss

.nav-item {
    $root: &;

    .nav-link.active {
        border: solid 1px gray!important;
        background-color: lightgray;
    }
    
    
    a {
        color: black;
        font-weight: bold;
    }

    &-.nav-link.active {
        #{$root} {
            border-left: solid 3px green;
        }
    }
}

Upvotes: 0

Views: 89

Answers (1)

symlink
symlink

Reputation: 12209

You can't traverse up the DOM with CSS or SASS. You should instead put the active class on the parent:

.nav-item.active .nav-link {
  border: solid 1px gray!important;
  background-color: lightgray;
}

.nav-item a {
  color: black;
  font-weight: bold;
}

.nav-item.active {
  border-left: solid 3px green;
}
<ul>
  <li class="nav-item active">
    <a class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Profile</a>
  </li>
</ul>

Upvotes: 1

Related Questions