css équivalent de la première:de l'enfant à la cible première <p> dans la div avec la tête et img précédent?

Je veux que le premier paragraphe de la div à texte plus grand que tous les paragraphes qui suivent, toutefois, le présent paragraphe n'est pas le premier enfant de la div. Comme écrit sur w3schools je pensais que la syntaxe suivante serait de travailler, mais il ne semble pas être:

#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>

Évidemment, je peux mettre les p éléments dans leur propre div, mais qui semble comme divitis et je voudrais savoir si il y a une façon simple de réaliser cette!

http://jsfiddle.net/35yYJ/

OriginalL'auteur Damon | 2011-05-29

  1. 10

    La plus façon simple de le faire est d'utiliser le CSS3 est :first-of-type:

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

    Mais l'appui de navigateur car il est pauvre, donc pour votre cas vous pouvez essayer d'utiliser ce CSS2-seulement sélecteur, en supposant que la première p est toujours suivi par un h2 et un img (à partir de votre question titre):

    #feature > h2:first-child + img + p {
    font-size: 22px;
}
    Si vous avez de nombreux ensembles de h2 + img + p [...] dans votre div#feature et souhaitez cibler chaque premier p qui se produit après une h2 + img, puis p:first-of-type ne fonctionne pas. Vous aurez besoin d'utiliser le CSS2 sélecteur, le retrait de la :first-child pseudo-classe.
    c'est incroyable! heh. en anglais je présume qu'il est à la recherche pour la première h2 dans la fonction div ensuite qu'il est suivi directement par un img et un p? Je n'ai jamais vu le '+' avant en css
    C'est le droit.

    OriginalL'auteur BoltClock

  2. 4

    vous pouvez cibler l'élément au-dessus de la p, puis utilisez les touches "+" à côté du sélecteur pour sélectionner le p.

    donc dans votre cas serait:

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

    et il prend en charge à partir de IE7

    Vérifiez le présent code de travail sur le Violon

    OriginalL'auteur Eric

  3. 1

    :first-child ne correspond pas à cause #feature :first-child serait l'élément h2 (et ce n'est pas une balise p). :first-child est le premier enfant de la mère. Vous souhaitez :first-of-type de CSS3. Mais il l'habitude de travailler sur IE < 9. Les autres navigateurs modernes devrait fonctionner, cependant: http://kimblim.dk/css-tests/selectors/

    OriginalL'auteur lambacck