Override CSS style of parent element without affecting other elements

Question

I would like to know how to display an element contained in a parent element that has the characteristics of "display: none". But do not leave other children under this parent. Here is 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 and the rest of #parent and his children not to be displayed. I know that there are workarounds that involve changing the CSS of each individual element, but I work with dozens of points here and wondered 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;} 

Thus, all p children from your parent will not be displayed, but the specific # item3 will be.

Answer 2

If you hide the parent, the children are not displayed.

Why don't you hide unwanted children and show only those that want to show.

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

And your CSS will be.

 .hide{display:none;} .show{display:block; }