0

I'm trying to add a css class to the parent (li-element) in scss when a class is present in child.

.main-menu {
  ul {
    li {
      &:has(> a.router-link-active) {
        border-left: 5px solid red;
        color: white;
      }
    }
  }
}

The html looks like this:

<div class="main-menu">
  <ul class="list-unstyled">
    <li>
        <a href="/" class="router-link-exact-active router-link-active">lorem
    </li>
  </ul>
</div>
Smoky
  • 97
  • 1
  • 9
  • Unfortunately not – Smoky Jul 16 '19 at 17:48
  • 2
    Actually your question should read "how to style a parent if it's child has a given class". You aren't adding a class to the parent, just changing it's style. Currently there is no way to do this without JavaScript. – chazsolo Jul 16 '19 at 17:49
  • Depending on how you are determining which element gets the `.router-link-active` class you could implement logic to attach a class (e.g. `.has-active-link`) to the `li` element and style it directly. This would be more inline with your current question, but yet is still not viable with pure CSS or a pre-processor. – chazsolo Jul 16 '19 at 17:54

0 Answers0