隐藏除特定子元素内容以外的所有内容

Question

How would I hide all of a certain element's contents excluding one specific child's contents?

Using display hides the child.

I want them visible and using visibility keeps the space of the hidden content.

Here is what I have:

 #test1 { visibility: hidden } #test2 { visibility: visible } #test3 { display: none } #test4 { display: block } 

 <div id="test1"> <div id="test2">test2</div> test1 </div> <div id="test3"> <div id="test4">test4</div> test3 </div> 

Answer 1

• you give a general class to the parent (if you don't to use the HTML tag), and apply it the property visibility:hidden and height:0
• apply to all children height:inherit (so it will apply 0 as parent has it)
• either by ID or class , whatever you feel most comfortable, you set the child you want to show visibility: visible and height:auto

 .hidden { visibility: hidden; height: 0; } .hidden > div { height: inherit; } .hidden .show { visibility: visible; height: auto; border: 1px dashed red; } 

 <div class="hidden" id="test1"> <div class="show" id="test2">test2 - i'm the only one visible!</div> test1 </div> <div class="hidden" id="test3"> <div id="test4">test4</div> test3 </div> <div class="hidden" id="test5"> <div id="test6">test5</div> test6 </div> 

Answer 2

Try something like this:

#test1 > * { visibility:hidden; }
#test1 > #test2 { visibility:visible; }

#test3 > * { display:none; }
#test3 > #test4 { display:block; }

<div id="test1">
    <div id="test2">
        <p>test2</p>
    </div>
    <p>test1</p>
</div>
<div id="test3">
    <div id="test4">
        <p>test4</p>
    </div>
    <p>test3</p>
</div>

The essence here is, that you can't hide a parent, and still show a child. The parent needs to be visible, and you must instead hide the unwanted child-elements, while only showing the one you need.