title: CSS psuedo classes, target first DIV .class within DIV
body: <p>I thought I knew this. There's three <code>div</code>s (.service-box) inside one wrapper <code>div</code> (.p-<code>div</code>)</p>
  
  <p>How do you target the first (or any.) of the three inner <code>div</code>s?</p>
  
  <p>This works, shows the structure is correct, will remove all inner <code>div</code>s.</p>
  
  <p><code>div.p-div &gt; div.service-box { display: none!important;}</code></p>
  
  <p>I just can't target the first inner <code>div</code>.</p>
  
  <p>I've tried <code>first-child</code>, <code>nth-of-type(1)</code>, <code>nth-child(1)</code></p>
  
  <p>I did notice <code>nth-of-type(1n)</code> removes all inner <code>div</code>s like the first CSS line. While <code>nth-of-type(2n)</code> removes all <em>but</em> the 2nd inner <code>div</code>. Basically doing the opposite of what I would expect (apply display:none only to the 2nd <code>div</code>, leaving the others intact)</p>
  
  <p>Gotta say I'm a little perplexed. Could just edit the HTML directly but.I thought we were past that you know?</p>