How to hide all elements of a web page except one, including its children?

It's about this web page. I want to use uBlock Origin to hide everything except section[data-content-login] and section[data-content-login] *, so that only the login mask remains.

This is what I tried as a custom filter rule:

www.gmx.net##body :not(section[data-content-login], section[data-content-login] *):style(display: none)

You might want to use

body *:not(:has(section[data-content-login]), section[data-content-login], section[data-content-login] *) {
    display: none;
}
/* Hide the immediate parent (happens to be: <div data-content>) */
[data-content] {
    display: contents;
}

The above adds display:none to every element besides:

• section ancestors
• section itself
• all elements within your section

and hides the immediate section wrapper as well using display:contents

Otherwise, you can try using visibility: hidden;, since when using that property you can then set its children to visibility: visible; as opposed to display: none; where you cannot revert the children to a visible state:

* {
    visibility: hidden;
}
section[data-content-login],
section[data-content-login] * {
    visibility: visible;
}