title: n-th child affecting every n-th child no matter how nested
body: <p>So I am using the <code>nth-child</code> selector to insert an iframe. The basic logic is <code>.selector-div :nth-child(3)</code> where I would select the 3rd child of the div and insert the iframe. The problem is that when I use this selector is will traverse nested elements and look for any 3rd child of nested elements. For example here is a basic structure of the code</p>
  
  <pre><code>&lt;div class='selector-div'&gt;
      &lt;p&gt;random text&lt;/p&gt;
      &lt;p&gt; text here
          &lt;a&gt;link&lt;/a&gt;
          &lt;b&gt;keyword&lt;/b&gt;
          &lt;em&gt;iframe also placed here&lt;/em&gt;
      &lt;/p&gt;
      &lt;p&gt;iframe here&lt;/p&gt;
      &lt;p&gt;more text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do not want the iframe to be embed in that <code>&lt;em&gt;</code> element but the selector is putting it there as well. Any suggestions?</p>
  
  <p>I tried using <code>:nth-of-type</code> and <code>p:nth-child</code> but I need the insertion of the iframe to be the 3rd element.</p>