Question

I’d like to know how to display an element contained within a parent element that has “display:none” characteristics. But leave the other children under that parent untouched. Here’s a simple example:

<div id="parent">
    <p id="item1">Item should show</p>
    <p id="item2">Item should show</p>
    <p id="item3">Item should not show</p>
<div><!--/parent-->

<style>
    #parent {display: none;}
    #item3 {display: block !important;}
</style>

So in this example, I want #item3 to be displayed, but the rest of #parent and its children not to show. I know there are workarounds that involve altering the CSS of every individual item, but I’m working with dozens of items here and was wondering if this is possible, even through JS. Thanks in advance.

Answer 1

Why don’t you use instead:

#parent>p{display:none;}
#item3{display:block;}

This way all p children in your parent won’t show, but the specific #item3 will.