Hi,

How to select all but one element with CSS selectors?

body { display: none; }
body .article { display: block; }

The above does not work as the body already is hidden. I want all elements decendent from .article to show (not nesescarily as block, though) and all elements outside .article hidden.

To answer your question, there is no such thing as an "everything-but-x" selector that's broadly supported. The closest you're going to get is

* { attribute: value; etc.; }
#exception { attribute: reset_value; etc.; }

CSS3 does support *:not(#exception) { attribute: value; } which does exactly the same thing as the preceding two rules combined, but I've never seen it in the wild.

Whoa. Before I (or anyone else) can hope to help you, you should probably explain why you're attempting to clobber the layout properties of the entire browser canvas (which would be the expected practical consequence of specifying body { display: none; }), assuming such an attr-val pair would be rendered... and in nine years of using CSS, I've never run across a situation in which I found that to be a necessary step. This assumes, of course, that you haven't already (see below).

(Yes, nine years. Grab my RL name from my profile and Google it.)

If you simply want .article to display while stashing everything else away (as might be the case if you're putting together a print stylesheet), then leave body untouched, and do the following:

body * { display: none; }
.article { display: block; margin: as_necessary; }

In point of fact, you should either have one article per document, or (if that's not possible) a container called #articleset (or whatever; I'd use #bodyCopy myself) that would contain nothing but elements that have been assigned to the class article. Doing so will increase the specificity of the selector you use to enforce the presentation requirement you described. Classes are more specific than single elements by one order of magnitude; ID's are more specific by two orders of magnitude. The unversal selector has no discrete specificity assigned, but overrules the browser's stylesheet.

The problem with usnig body * is that all elements inherit that value. Then I have to set each and every possible element with either inline and block.

Have you ever tried *:not(.something) {bla-bla}? Does it work in any popular browser:not(IE)?

Persist's method is the only one that will work. CSS3 is still not released, so that's a no-go for at least a while.

Remember that using display: none literally rips that element out of the page structure and it will have no effect on other elements (other than those that cascade from it). Using visibility: hidden, might be a better choice.

I'd also like to know why are you doing this?