title: How to override a display:none property applied to parent element in specific child elements
body: <p>Ive been scratching my head over this one for a while and cant figure out why its not working. Im basically trying to hide some specific content on a page using only CSS - for this bit of work i wont have access to the on page HTML but will be able to inject CSS at will.</p>
  
  <p>Okay so ive got a basic HTML structure as follows:</p>
  
  <pre><code>&lt;div id="content-body"&gt;
  &lt;p&gt; want this to stay &lt;/p&gt;    
  &lt;h2&gt;want this to stay&lt;/h2&gt;
  &lt;p&gt; want this to stay &lt;/p&gt;
  &lt;p&gt; want this to stay &lt;/p&gt;
  &lt;p&gt; want this removed &lt;/p&gt;    
  &lt;h2&gt;want this removed&lt;/h2&gt;
  &lt;p&gt; want this removed &lt;/p&gt;
  &lt;p&gt; want this removed &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ive put together the following CSS to remove the entire "content-body" element and then override this on specific children, however it doesnt seem to work.</p>
  
  <pre><code>#content-body {display:none}
  
  p:nth-child(1) {display:block !important}
  h2:nth-child(2) {display:block}
  p:nth-child(3) {display:block}
  p:nth-child(4) {display:block}
  </code></pre>
  
  <p>the important tag doesn't seem to make any difference. Is there anything incorrect about how i've formatted this? (the actual page has a lot more HTML than the example so removing everything through CSS is a lot easier than individually selecting elements, although i may need to do this instead)</p>