css equivalent of first:child to target first <p> in div with heading and img preceding?

Question

I want the first paragraph in the div to be larger text than all following paragraphs, however the paragraph is not the first child of the div. As written on w3schools I thought the following syntax would work, but it doesn't seem to be:

#feature > p:first-child {
    font-size: 22px;
}


#feature p {
    font-size: 16px;
}


<div id="feature">
    <h2>Feature Name</h2>
    <img class="featureimg" src="images/whatever.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nam mattis accumsan consequat. Vivamus eu ligula magna. Cras ultrices nisl et justo convallis nec volutpat purus facilisis.Vestibulum eget augue justo, </p>
</div>

Obviously I can put the p elements in their own div, but that seems like divitis and i'd like to know if there's a more straightforward way to accomplish this!

http://jsfiddle.net/35yYJ/

Answer 1

The most straightforward way to do it is to use CSS3's :first-of-type:

#feature > p:first-of-type {
    font-size: 22px;
}

But browser support for it is poor, so for your case you can try using this CSS2-only selector, assuming the first p is always followed by an h2 and an img (from your question title):

#feature > h2:first-child + img + p {
    font-size: 22px;
}

Answer 2

you can target the element above the p, then use "+" adjacent selector to select the p.
so in your case would be:

#feature img + p {
    font-size: 22px;
}

and it supports from IE7

Check this working code on Fiddle

Answer 3

:first-child does not match because #feature :first-child would be the h2 element (and it is not an p tag). :first-child is the first child of the parent. You want :first-of-type from CSS3. But it wont work on IE < 9. Other modern browsers should work though: http://kimblim.dk/css-tests/selectors/