Nesting/Overriding Properties in CSS

Some things you just can’t undo in CSS.

<div style="display: none;">
  <div style="display: block;">
    Still hidden.
  </div>
</div>Code language: HTML, XML (xml)

But, perhaps unintuitively, that does work with visibility.

<div style="visibility: hidden;">
  <div style="visibility: visible;">
    Visible
  </div>
</div>Code language: HTML, XML (xml)

Ben Nadel makes the point that pointer-events is another one of those properties that allows you to “undo” what a parent has set. It’s like pointer-events just cascades down to descendent elements and you override it, but some properties you just can’t come back from, like display above or opacity.

When I got thinking about this I somehow got tinkering with nesting elements and remembered how fun it can be to apply the same animation to lots of nested elements and just see what happens.