Hide an element based on the existance of other classes conditionally - css

Question

I am getting HTML from an external source and can't change the code, so in order to get the result we need I need to conditionally hide things.
In this example, where I have a level-0 and level-1 I need to set display:none on the h2 (finance in this case).
<section class="level-0">
<h2 id="4001567002">Finance</h2>
<section class="child level-1">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
</section>
It could be that there is no level-1 in which case the level-0 header should be visible:
<section class="level-0">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
The ids are not predictable, so I cannot hide the levels based on that.
Is this possible in pure CSS or should I come up with another solution?

Answer 1

I was not able to do what you want with Pure CSS, and I don't think it is possible as you cannot add conditional statements within CSS.
Please find below a solution with a little bit of jquery:
var count = $(".level-0").length +1;
for (i = 1; i < count; i++) {
if ($(".level-1").parents('.container > .level-0:nth-of-type(' + i + ')').length == 1) {
$( '.level-0:nth-of-type(' + i + ')').addClass( "has-lv1" );
} else {
$( '.level-0:nth-of-type(' + i + ')').addClass( "no-lv1" );
}
}
.container {
border: solid 1px black;
padding: 20px;
background-color: lightblue;
}
.container > h2{
color: green;
}
.has-lv1 > h2 {
display: none;
}
.no-lv1 > h2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Example with <strong>Level 1</strong></h2>
<section class="level-0">
<h2 id="4001567002">Finance</h2>
<section class="child level-1">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
</section>
</section>
<hr>
<h2>Example without <strong>Level 1</strong></h2>
<section class="level-0">
<h2 id="4001567002">Finance</h2>
</section>
</div>
I hope this helps