CSS menu, how to select parent-CodePudding

I have three items in a navigation menu

<nav>
    <ul >
        <li >
            <a href="/le-reseau-pikard"  data-drupal-link-system-path="node/12">Le Réseau Pikard</a>
        </li>
        <li >
            <a href="/accueil"  data-drupal-link-system-path="node/17">Pikard</a>
        </li>
        <li >
            <a href="https://isoprotek.fr" >Isoprotek</a>
        </li>
    </ul>
</nav>

I want the second <a> is-active CSS class disabled when the first parent li has active class. How can I do this ?

CodePudding user response：

Specific to your question, and code example shared, the below should work by using the next sibling selector.

li.active   li > a.is-active {
  pointer-events: none;
  opacity: 0.3;
}

const btn = document.querySelector('button');
const firstLi = document.querySelector('.menu-topnav > li:first-of-type');

btn.addEventListener('click', ()=>{
  let activeClass = firstLi.classList.contains('active') ? firstLi.classList.remove('active') : firstLi.classList.add('active');
  
});

li.active   li > a.is-active {
  pointer-events: none;
  opacity: 0.3;
}

<nav>
    <ul >
        <li >
            <a href="/le-reseau-pikard"  data-drupal-link-system-path="node/12">Le Réseau Pikard</a>
        </li>
        <li >
            <a href="/accueil"  data-drupal-link-system-path="node/17">Pikard</a>
        </li>
        <li >
            <a href="https://isoprotek.fr" >Isoprotek</a>
        </li>
    </ul>
</nav>
<button>Toggle active class from first LI</button>