If you set an element to display: none the browser ignores all of its children, if a child sets itself to display: block it will remain hidden. This isn't true of visibility.

Serious?

Serious.

html.show-only-the-button {
  visibility: hidden;
}
html.show-only-the-button .the-button {
  visibility: visible;
}

Toggle everything but this

So says the spec:

hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

— CSS 2.1

I've found this useful when testing paint-related issues, as you can isolate a particular element without disrupting layout.

Further reading

• Having fun with <image> - another spec oddity
• Animated line drawing in SVG