:first-child ne fonctionne pas comme prévu

Question

:first-child ne fonctionne pas comme prévu

Demandé el 22 de Décembre, 2010: Quand la question a-t-elle été
24815 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Demandé el 22 de Décembre, 2010 par The Muffin Man

1 votes

Tout ce que CSS ne peut pas faire, JavaScript le peut.

Commenté el 22 de Décembre, 2010 par JCOC611

11 votes

C'est quelque chose que vous pouvez faire avec CSS3 :)

Commenté el 22 de Décembre, 2010 par BoltClock

Answer 1

5 Réponses

Answer 2

237voto

BoltClock Points 249668

El h1:first-child moyens de sélection

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

El :first-child du conteneur, voici le ul et, en tant que tel, ne peut satisfaire h1:first-child .

Il y a l'option CSS3 :first-of-type pour votre affaire :

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

Mais avec les problèmes de compatibilité des navigateurs et autres, il est préférable de donner la première h1 une classe, puis en ciblant cette classe :

.detail_container h1.first
{
    color: blue;
}

Répondu el 22 de Décembre, 2010 par BoltClock (249668 Points )

2 votes

Je comprends maintenant, mais je pense qu'ils auraient dû mettre en œuvre les deux versions lorsqu'ils ont créé la norme.

Commenté el 22 de Décembre, 2010 par The Muffin Man

0 votes

Ne fonctionne pas dans la version IE9. Il est indiqué h1:unknown dans l'outil de développement

Commenté el 17 de Mars, 2011 par Cine

11 votes

Liste des compatibilités de :first-of-type sélecteur.

Commenté el 30 de Janvier, 2012 par Jess Telford

Afficher 3 autres commentaires

Answer 3

15voto

Rob Sobers Points 5528

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

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

La méthode de jQuery :first Le sélecteur vous donne ce que vous cherchez. Vous pouvez le faire :

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

Répondu el 22 de Décembre, 2010 par Rob Sobers (5528 Points )

0 votes

Vous avez raison, c'est trompeur, je me suis surtout embrouillé parce que j'ai déjà utilisé jQuery pour faire cela auparavant.

Commenté el 22 de Décembre, 2010 par The Muffin Man

Answer 4

10voto

Grekz Points 932

Pour ce cas particulier, vous pouvez utiliser :

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

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

Répondu el 22 de Décembre, 2010 par Grekz (932 Points )

0 votes

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

Commenté el 26 de Septembre, 2012 par Grekz

Answer 5

7voto

user3419033 Points 11

Vous pouvez également utiliser

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

En remplaçant le chiffre 1 par n'importe quel autre chiffre, vous pouvez sélectionner n'importe quel autre élément h1.

Répondu el 14 de Mars, 2014 par user3419033 (11 Points )

Answer 6

2voto

GhostToast Points 362

Vous pourriez envelopper votre h1 dans un autre div et ensuite le premier serait le first-child . Ce 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>

Répondu el 9 de Mai, 2012 par GhostToast (362 Points )

:first-child ne fonctionne pas comme prévu

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

:first-child ne fonctionne pas comme prévu

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: