With CSS only, how do I hide parent sub element if ID exists?

Question

Using CSS only, how can i hide NAV when another element ID exists in the following element?

<nav>...</nav>
<div id="main">
    <div id="page-calendar">...</div>
</div>

I want to hide NAV when the #main element contains #page-calendar.

Thanks in advance :)

Answer 1

No, you can not do. There is no clean way to select a previous element in CSS.

Is there a "previous sibling" selector?

---

But if you change the flow of the elements you can do. Albeit I do not recommend it because it is much cleaner and easier to do in javascript.

Use nav inside #main after #page-calendar and position it fixed or aboslute before the #main element. Then, you can select it using next-sibling combinator

<div id="main">
    <div id="page-calendar">Calendar</div>
    <nav>Nav</nav>
</div>

#main {
 position: relative;
 top: 30px;
}


nav {
 position: fixed;
 top: 20px;
}

#page-calendar + nav {
  display: none;
}

<div id="main">
    <div id="page-calendar">Calendar</div>
    <nav>Nav</nav>
</div>

---