: le premier enfant ne travaille pas comme prévu

96

J'essaye de sélectionner le premier à l' h1intérieur d'un divavec une classe appelée detail_container. Cela fonctionne si h1c'est le premier élément div, mais s'il vient après cela, ulcela ne fonctionnera pas.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

J'avais l'impression que le CSS que j'ai sélectionnera le premier, h1peu importe où il se trouve div. Comment puis-je le faire fonctionner?

css css-selectors L'homme aux muffins
la source
1
Tout ce que CSS ne peut pas faire, JavaScript le peut.
JCOC611
11
C'est quelque chose que vous pouvez faire avec CSS3 cependant :)
BoltClock

Réponses:

216

Le h1:first-childsélecteur signifie

Sélectionnez le premier enfant de son parent
si et seulement si c'est un h1élément.

Le :first-childdu conteneur ici est le ul, et en tant que tel ne peut pas satisfaire h1:first-child.

Il existe des CSS3 :first-of-typepour votre cas:

.detail_container h1:first-of-type
{
    color: blue;
}

Mais avec les problèmes de compatibilité du navigateur et autres, il vaut mieux donner au premier h1une classe, puis cibler cette classe:

.detail_container h1.first
{
    color: blue;
}
BoltClock
la source
2
Je comprends maintenant, même si je pense qu'ils auraient dû implémenter les deux versions lorsqu'ils ont créé la norme.
The Muffin Man
Ne fonctionne pas dans la version IE9. Il dit h1: inconnu dans l'outil de développement
Ciné
11
Liste de compatibilité du :first-of-typesélecteur.
Jess Telford
4
Liste de compatibilité plus récente de :first-of-type. L'ancien lien est incorrect.
BadHorsie
À mon avis, le terme :first-childn'est pas clair à comprendre, car vous définissez l'élément comme un sélecteur CSS, par exemple h1, et vous pensez ensuite "prendre le premier enfant" de tous dans le niveau DOM choisi. Je l'ai mal utilisé tant de fois ... Il faut s'habituer au :first-of-typesélecteur et penser au premier enfant de ce type.
Kai Noack
13

:first-childsélectionne le premier h1 si et seulement si c'est le premier enfant de son élément parent. Dans votre exemple, le ulest le premier enfant du div.

Le nom de la pseudo-classe est quelque peu trompeur, mais il est expliqué assez clairement ici dans la spécification.

Le :firstsélecteur de jQuery vous donne ce que vous recherchez. Tu peux le faire:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
la source
Votre droit est trompeur, je suis principalement confus parce que j'ai déjà utilisé jQuery pour le faire.
The Muffin Man
9

Pour ce cas particulier, vous pouvez utiliser:

.detail_container > ul + h1{ 
    color: blue; 
}

Mais si vous avez besoin du même sélecteur dans de nombreux cas, vous devriez avoir une classe pour ceux-ci, comme l'a dit BoltClock.

Grekz
la source
Vous ne devriez pas avoir de problèmes. Voici la référence w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

vous pouvez aussi utiliser

.detail_container h1:nth-of-type(1)

En changeant le nombre 1 par n'importe quel autre nombre, vous pouvez sélectionner n'importe quel autre élément h1.

Fabrice
la source
1

Vous pouvez envelopper vos h1tags dans un autre div, puis le premier serait le first-child. Cela divn'a même pas besoin de styles. C'est juste une façon de séparer ces enfants.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
la source
0

L'élément ne peut pas hériter directement de la <body>balise. Vous pouvez essayer de le mettre dans une <dir style="padding-left:0px;"></dir>balise.

Edmond Chow
la source