jQuery/CSS - How to style the first occurrence of an element inside of another element?

Question

Here's my problem.

HTML

<div id="content">
    <h1>Headline</h1>
    <p>First paragraph that needs to be yellow.</p>
    <p>Second paragraph that need not change. :) </p>
    <p>Third paragraph that need not change. :) </p>
</div>

If I use #content p:first-child {color:yellow; } it doesn't work because p isn't the first-child of content... h1 is the first born.

How can I do this without touching the HTML code?

Thank you!

All the best, Cris

Answer 1

a css3 solution

#content > p:first-of-type { color: yellow; }

Answer 2

This is the best way:

$('#content p:first').css('color', 'yellow');

Answer 3

you can use also (CSS, jQuery) nth-of-type:

#content p:nth-of-type(1) {color:yellow; }

$('#content p:nth-of-type(1)').css('color', 'yellow');

Answer 4

Use the .first() function (or :first selector) instead:

$('#content > p').first().css('color', 'yellow');

Answer 5

<script>
$(function(){
    $('#content p:first').css('color','yellow');
});
</script>