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>Code language: HTML, XML (xml)

But, perhaps unintuitively, that does work with visibility.

<div style="visibility: hidden;">
  <div style="visibility: visible;">
</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.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *