CODEWITHSUNDEEP
css
Adam Baranyai
Adam Baranyai

Reputation: 3867

CSS property visibility hidden is being ignored

I have the following html structure:

.screens > .screen {
  visibility: hidden;
}

.screen.pt-page-current {
  visibility: visible;
}
<div class="screens">
  <div class="info-screen screen screen-viewer"> <!-- does not have pt-page-current so this has visibility: hidden -->
    <div class="screens">
      <div class="loading-screen screen pt-page-current"> <!-- receives visibility: hidden for the first rule, but the rule is overwritten in the second rule, because of the pt-page-current class to visibility: visible -->
        The page is currently loading.
      </div>
    </div>
  </div>
  <div class="menu-screen screen screen-viewer">
    <div class="screens">
      <div class="menu-screen screen pt-page-current">
        You accessed the menu.
      </div>
    </div>
  </div>
</div>

The idea here would be to create a type of single page app (a screen viewer), that can have multiple screens (.screen class), but at most one screen visible at the time (the screen marked with the .pt-current-page).

Each "screen" object in turn, can be another screen viewer, containing sub screens, and etc. For transitionining between screens I am trying to work with the visibility property in css. My problem is, that based on just the above code, I would expect my browser to display nothing, as both outer .screen classes have the visibility: hidden property set, yet the browser displays the inner .screen from both outer .screen classes.

See fiddle here.

Am I misinterpreting how visibility should work, or is this some kind of a bug?

Upvotes: 0

Views: 1650

Answers (2)

Adam Baranyai
Adam Baranyai

Reputation: 3867

As @Zain posted it out, the inner elements visibility trumps the outer elements visibility, meaning that you can not hide whole blocks of dom elements with an outer visibility: hidden. If anything inside the block has a visibility: visible explicitly set, it will show.

See also: https://jakearchibald.com/2014/visible-undoes-hidden/

Upvotes: 2

fatm
fatm

Reputation: 455

You are putting visibility to hidden then again in visible. If it has similar selectors then css gets last one. Check your classes

.screens > .screen {
  visibility: hidden;
}

.screen.pt-page-current {
  visibility: visible;
}
<div class="screens">
  <div class="info-screen screen screen-viewer">
    <div class="screens">
      <div class="loading-screen screen">
        The page is currently loading.
      </div>
    </div>
  </div>
  <div class="menu-screen screen screen-viewer">
    <div class="screens">
      <div class="menu-screen screen">
        You accessed the menu.
      </div>
    </div>
  </div>
</div>

Upvotes: -1

Related Questions