Display this element (and everything nested in it) and nothing else?

edited February 2007 in Style Development
I was meticulously hacking away at 'stuff I didn't want' at a certain web site when I realised that it would be much easier just to point to a specific element and say: Remove everything else but leave this and everything within it. So I tried
* {display: none !important;} #srchContent {display: block !important;}and later added
* {display: none !important;} #srchContent, #srchContent *, #srchContent > * {display: block !important;}
The second line, however, didn't seem to accomplish anything - the page just went blank.

Grateful for any ideas/comments?


  • You could use the negation pseudo-class, but I don't have experience with it:

    The negation pseudo-class, written :not(s), takes a simple selector as an argument. It targets elements that are not targeted by the simple selector. For example, the following CSS will target any element that is not a p element:

    1. :not(p) { border:1px solid #ccc; }

    The negation pseudo-class currently works in browsers based on Mozilla and Safari.
  • edited February 2007
    Goddamnit, I knew that... Of course. Thanks josdigital.

    EDIT: Problem still is, though, that :not(#srchContent) also removes everything nested within #srchContent :-/
  • edited February 2007
    I'm too tired to dink around with it but this may give you the effect you want:

    * { visibility: hidden ! important; }

    .srchContent * { visibility: visible ! important; }

    .srchContent { position: absolute ! important; top: 10px ! important; }

    span .srchContent { position: absolute ! important; top: 250px ! important; }
  • Thanks for suggestion Weishun but no it doesn't really look any different than the display version. I have made an ordinary approach to the specfic pages in question (a popup reference for the NY Times, e.g. http://query.nytimes.com/search/query?srchst=ref&query=Christian%20Right%20Labors%20to%20Find&fw=1) but I'm still a bit puzzled that I apparently cannot target some element and all children. Maybe I just havenøt looked/thought hard enough.
  • I guessed the wrong site; my bad. 8-(

    Try this:

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix("http://query.nytimes.com") {
    body { visibility: hidden ! important; }
    #srchMain { visibility: visible ! important; position: absolute ! important; top: 5px ! important; }
  • remove :not(form) if you don't want the search boxes or use :not([name="mainFormTop"]) or :not([name="mainFormBottom"]) to keep one
    @namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("query.nytimes.com"){ body>*:not(#srchMain):not(form){display:none!important}}
  • edited August 2007
    Facing a similar problem, I 'came up with' the following fairly stable solution: For each level in the tree down to the element you wish to preserve, display:none everything but the (grand^x)parent element, e.g. the tree is td.right_col > div.page_content > div.page_content_box > div.word_definition, and I wish to preserve div.word_definition (and everything within it), so I do:
    .right_col>div:not(.page_content), .page_content>div:not(.page_content_box), .page_content_box>div:not(.word_definition) { display: none !important; }
    Obviously it doesn't work well with tables inside cells inside tables inside etc. but the again what does. And it's probably what you'd end up with anyway - it's just a shortcut way of thinking, I guess: Focus on what you want to keep rather than what you want to go away.
Sign In or Register to comment.