Question

I’ve got the following HTML, and I’m trying to target the first < p >

<div id="div-1">
    <h2>Foo</h2>
    <p>Bar</p>
    <p><iframe></p>
</div>

I tried using the following jQuery:

$("div#div-1 p:first").css('color','red');

It didn’t work, so I thought it was the iframe that was causing the issue, but then I tried inserting something else into the < p >, and it still didn’t work:

<div id="div-1">
    <h2>Foo</h2>
    <p>Bar</p>
    <p><h3>Foobar</h3></p>
</div>

So obviously it’s an issue with nesting elements within a < p >.
How do I resolve this? Due to using WordPress, I’m kind of stuck with using an iFrame nested inside a < p >, so I need to work around that.

Answer 1

Your code works fine: http://jsfiddle.net/ThiefMaster/EFjsZ/1/

But you should really end the <iframe> tag…