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

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

a css3 solution

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

This is the best way:

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

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');

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

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

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

Since you have tagged it using jQuery, jQuery based solution:

$("#content p:first-child").css({color:"yellow;" });

EDIT:

$("#content p:nth-child(2)").css({color:"yellow" });

With just CSS, you could use the sibling selector + like so:

#content h1 + p { color: yellow; }

This would only change paragraphs immediately following H1s.

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

Try this:

$("div p:first")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });