À l'aide de CSS premier enfant pour sélectionner la première H2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
h2:first-child
{
background:yellow;
} 
</style>
</head>
<body>
<div class="car">
    <div>Something</div>
    <h2>I want to style this</h2>
    <p>bla bla</p>
    <h2>I don't want to style this</h2>
    <p>bla bla bla</p>
</div>

</body>
</html>

Je vais avoir de la difficulté à le style de la première h2, "je veux le style de ce" depuis que j'ai une div juste avant que les premières h2 je ne peux pas choisir, mais si elle n'y est pas, il va travailler. Sans modifier le code html (et sans utiliser de js, bien sûr) est-il un moyen pour sélectionner la première h2? Ou est l'emballage de la h2 avec un autre élément, comme ci-dessous, la seule façon?

<div class="car">
    <div>Something</div>
<div>
        <h2>I want to style this</h2>
        <p>bla bla</p>
        <h2>I don't want to style this</h2>
        <p>bla bla bla</p>
</div>
</div>

OriginalL'auteur Joker | 2011-03-30

  1. 5

    Il y a un moyen plus simple que Sapph de la méthode qui est CSS2 l'aide du sélecteur adjacent:

    .car div + h2{}

    neat! ne savais pas qu'elle existait.
    merci pour votre réponse, je vais utiliser cette méthode pour l'instant puisque certaines anciennes versions de IE ne prennent pas en charge CSS3. Le premier type a un avantage, c'est que vous n'avez pas besoin de connaître l'élément avant. Je pourrais commencer à l'utiliser quand plus de gens utiliser IE9.

    OriginalL'auteur Wesley Murch

  2. 9

    Si vous êtes prêt à brancher CSS3, le first-of-type sélecteur est exactement ce que vous essayez d'accomplir.

    Voici un exemple: http://jsfiddle.net/m3yrR/1/

    first-of-type toujours la première occurrence d'un élément à n'importe quel niveau. Donc, pour votre cas, il serait le style de la première <h2> à tout niveau dans le balisage de l'arbre. Vous pouvez bien sûr utiliser plus spécifiques sélecteurs à limiter les endroits où il est sélectionné. 🙂

    Sinon, oui, vous aurez à faire quelque chose comme de l'envelopper dans un autre <div>, assurez-vous que c'est le premier élément, puis faire div > h2:first-child. Ou tout simplement h2:first-child, si vous voulez être moins spécifique.

    Assurez-vous simplement que c'est le premier enfant (!!) de sa mère, et être spécifique que vous avez besoin pour être avec la hiérarchie parent-enfant.

    OriginalL'auteur Sapph