How to apply specific style to parent based on its child class in SASS

Asked Jun 05 '18 at 12:05

Active Jun 05 '18 at 17:20

Viewed 3,405 times

I have a nested dropdown navigation as shown below :

<div class="menu-list">
   <ul id="menu-content" class="menu-content collapse out">
      <li> Hi </li>
      <li class="parent_li" data-target="#products_sidebar" data-trigger="click" data-toggle="collapse" data-placement="right">
         Sub Route
         <ul class="sub-menu collapse" id ="products_sidebar">
            <li >Sub A</li>  <!-- gets a class "active" on click -->
         </ul>
      </li>
   </ul>
</div>

The li for sub-route gets highlighted on click(done using active-class of vue router-link). But how to highlight its parent li (.parent_li) ?

I know this can be handled in JS. But i am expecting solution in SASS or CSS

edited Jun 05 '18 at 17:20

Mickaël Leger

3,426
2
17
36

asked Jun 05 '18 at 12:05

Karthik S

Doesnt `.parent:active{}` also work? – Martijn Jun 05 '18 at 12:15
5

For reference: https://stackoverflow.com/a/1014958/6191987 – vishnu Jun 05 '18 at 12:20
1

You can't target an element's parent in CSS (or in SASS). – mfluehr Jun 05 '18 at 18:51
you need to specify the separate class for the parent on the active state of the list using the js – Anand Paul Jul 14 '20 at 07:08

How to apply specific style to parent based on its child class in SASS

0 Answers0