Class css that generates a display: none automatically

Question

I have a DIV Container with inside a DIV with a label with this class labelSection

<DIV class="form-group labelSection">

and a series of other DIVs without the tag labelSection

<DIV class="form-group questionHidden">

I would like to know if I can create a class to add to the DIV with the label (labelSection) that I hide when all the other DIVs in the Container have the questionHidden class

<DIV class="Container">
        <DIV class="form-group labelSection">to be hidden when all the others are hidden</DIV>

        <DIV class="form-group questionHidden">1</DIV>
        <DIV class="form-group questionHidden">2</DIV>
        <DIV class="form-group">3</DIV>
        <DIV class="form-group questionHidden">4</DIV>

</DIV>

Thanks

Answer 1

To do that you need to use Javascript. It is not possible with just css.

Here is an working example

$(function() {
  $(".hideDiv").on('click', function() {
    $(this).parent().addClass("questionHidden");
    var allHidden = true;
    $(".Container .form-group").each(function() {
      if ($(this).hasClass("labelSection")) {
        return true;
      }
      if (!$(this).hasClass("questionHidden")) {
        allHidden = false;
      }
    });
    if (allHidden) {
      $(".labelSection").hide();
    }
  });
});

.questionHidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Container">
  <div class="form-group labelSection">to be hidden when all the others are hidden</div>

  <div class="form-group">1 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">2 <button class="hideDiv">Hide</button></div>
  <div class="form-group">3 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">4 <button class="hideDiv">Hide</button></div>
</div>