How to modify an element when another element has an .active class with CSS?

Question

How to select the .field-wrapper element when the .list-nav element has the .active class? The objective is that .field-wrapper z-index = -1 only with CSS.

<nav class="nav">
    <a href=""></a>
    <ul class="nav-list"></ul>
    <img src="" alt="">
</nav>

<div class="main">
    <div class="wrapper">
        <div class="field-section">
            <div class="field-wrapper"></div>
        </div>
    </div>
</div>

Chat GPT proposed two solutions but neither works

    nav .nav-list.active + .main .field-wrapper {
    z-index: -1;
}

and

    .nav-list.active ~ .field-wrapper {
    z-index: -1;
}