n-th child affecting every n-th child no matter how nested

Asked Jan 14 '20 at 14:56

Active Jan 14 '20 at 14:57

Viewed 26 times

So I am using the nth-child selector to insert an iframe. The basic logic is .selector-div :nth-child(3) 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

<div class='selector-div'>
    <p>random text</p>
    <p> text here
        <a>link</a>
        <b>keyword</b>
        <em>iframe also placed here</em>
    </p>
    <p>iframe here</p>
    <p>more text</p>
</div>

I do not want the iframe to be embed in that <em> element but the selector is putting it there as well. Any suggestions?

I tried using :nth-of-type and p:nth-child but I need the insertion of the iframe to be the 3rd element.

edited Jan 14 '20 at 14:57

isherwood

58,414
16
114
157

asked Jan 14 '20 at 14:56

cv12

That's how CSS works. You might look at the child selector (`>`) as a limiting device. – isherwood Jan 14 '20 at 14:58
If you're actually asking about your jQuery selector, please show some. – isherwood Jan 14 '20 at 14:59
Thank you! I was missing the child selector, appreciate the help – cv12 Jan 14 '20 at 15:14

n-th child affecting every n-th child no matter how nested

0 Answers0