title: selecting nested first child element without sibling with css
body: <p>I have a chunk of HTML I'm unable to edit (without using JavaScript).</p>
  
  <p>I'm trying to hide a paragraph with CSS. The paragraph doesn't have an <code>id</code>. Is there any way to target only it and not its sibling <code>&lt;p&gt;</code> with CSS?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="foo"&gt;
       &lt;div&gt;&lt;/div&gt;
       &lt;p&gt; this is the paragraph to hide&lt;/p&gt;
       &lt;p&gt; this one should not be affected&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>