<nav> and <button> are sister elements. How can I write CSS for the <button> when the <nav> active class is added?

Issue

<nav class="">
    <a class="nav-item">1</a>
    <a class="nav-item">2</a>
    <a class="nav-item">3</a>
    <a class="nav-item">3</a>
    <a class="nav-item">4</a>
</nav>

<button class="mobile-button">Button</button>

The code above is my HTML template. If "active" is added in the <nav> class, I want to write CSS to the <button> below, how can I select this?

Please don't put the button in navigation, I need to do it this way.

Solution

you could use the next sibling combinator + if button immediately follows nav:

nav.is-active + .mobile-button {
  /* styles here */
}

or, if a more distant sibling, you could use the ~ subsequent sibling combinator:

nav.is-active ~ .mobile-button {
  /* styles here */
}

Using the :has() pseudo-class you could also refer to a parent having an active child and than refer to the target:

body:has(nav.is-active) .mobile-button {
  /* styles here */
}

or just like:

:has(nav.is-active) .mobile-button {
  /* styles here */
}

Answered By - Roko C. Buljan