Display vs Visibility

Question

In one of my page I can have two situation.

The first, in case no event found

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
        <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        No event found!    </div>
</div>

or this if at least event is found

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
      <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        <div class="mec-wrap colorskin-custom">
    <div class="mec-event-list-minimal">
            <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
    </article>
                        </div>
</div>
        <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
        Nessun evento trovato!    </div>
    </div>

I need to hidden the first situation, I don't see the "No events found" I have found a solution with css. This work fine, but if I use display instead visibility, the code not work. Work fine the "display:none" but I can't make it reappear the structure if event is found. I have tried every value for "display" (block, flex, etc. etc.) nobody works

https://codepen.io/MarcoRM69/pen/VwLrXWb

.mec-skin-list-events-container {  
visibility:hidden;  
}
.mec-skin-list-events-container > div {
  visibility:visible;
}

Any suggestions?

Answer 1

Modern browsers doesn't yet have impletemted has() pseudo-class unfortunately.

You can that easily with a JavaScript or library such as jQuery instead of using CSS. jQuery implement :has() selector.

Description: Selects elements which contain at least one element that matches the specified selector. The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

$('.mec-skin-list-events-container').addClass("d-none");
$('.mec-skin-list-events-container:has(div)').addClass("d-block");

body {
  color: green;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.mec-skin-list-events-container+div:not(:has(div)) {
  color: black;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    Nessun evento trovato! </div>
</div>

<hr>

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    <div class="mec-wrap colorskin-custom">
      <div class="mec-event-list-minimal">
        <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
          ARTICLE HERE
        </article>
      </div>
    </div>
    <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
      Nessun evento trovato! </div>
  </div>
</div>

Answer 2

display: none... is not working, while visibility:hidden... is working because display: none removes the affected element from the page while visibility:hidden does not.

Since display:none removes the containing div, you cannot then ask to display the contained div.

From your codepen:

.mec-skin-list-events-container {  
  visibility:hidden; 
  /*display:none;*/

}
.mec-skin-list-events-container > div {
  visibility:visible;
  /*display:block;*/  
}