web-dev-qa-db-fra.com

: le premier enfant ne travaille pas comme prévu

J'essaie de sélectionner le premier h1 à l'intérieur d'une div avec une classe appelée detail_container. Cela fonctionne si h1 est le premier élément de cette div, mais s'il vient après cette ul, cela 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 je possède va sélectionner le premier h1, peu importe où il se trouve dans cette div. Comment puis-je le faire fonctionner?

csscss3css-selectors
73
The Muffin Man

Le sélecteur h1:first-child signifie

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

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

Il y a le :first-of-type de CSS3 pour votre cas:

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

Mais avec les problèmes de compatibilité de navigateur et autres, vous feriez mieux de donner au premier h1 une classe, puis de le cibler:

.detail_container h1.first
{
    color: blue;
}
176
BoltClock

:first-child sélectionne le premier h1 si et seulement si il s'agit du premier enfant de son élément parent. Dans votre exemple, la ul est le premier enfant de la div.

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

le sélecteur :first de jQuery vous donne ce que vous cherchez. Tu peux le faire:

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

11
Rob Sobers

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.

8
Grekz

vous pouvez aussi utiliser

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

En modifiant le nombre 1 par un autre nombre, vous pouvez sélectionner n’importe quel autre élément h1.

4
Fabrice

Vous pouvez envelopper vos balises h1 dans une autre div et la première serait le first-child. Cette div n'a même pas besoin de styles. C'est juste un moyen de séparer ces enfants.

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

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

0
Edmond Chow