CSS débutant - Sélectionner le nième enfant.

Signaler
Messages postés
40
Date d'inscription
lundi 10 février 2020
Statut
Membre
Dernière intervention
25 octobre 2020
-
Messages postés
30261
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2020
-
Bonjour à tous,
Après avoir crée quelques balises d'exemple, mêlant "div" et "p", je veux sélectionner le nième child chez les « div », à partir du moment où celui-ci est situé en 3ème position.

Voici mon HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="class1">
  
 </div>
 <p></p>

 <div class="class2">
  
 </div>
 <p></p>

 <div class="class3">
  
 </div>
 <p></p>

 <div class="class4">

</body>
</html>


Et voici mon CSS :
div{
 width: 100%;
 height: 100px;
 background: red;
}

div:nth-child(3){
 background: yellow;
}


Je m'attendais à ce que soit sélectionné le deuxième "div", car le 1er est le 1er enfant, le 2eme enfant est mon paragraphe, et le 3ème enfant est donc bien mon 2ème div. Malheureusement, c'est le premier qui se sélectionne : https://zupimages.net/viewer.php?id=20%2F43%2F8n36.png

C'est en demandant de sélectionner le 5ème enfant, que mon 2ème "div" se sélectionne :
https://zupimages.net/viewer.php?id=20%2F43%2Fg0z2.png

Je ne comprend pas trop. Est-ce un bug ?

Merci.

Configuration: Windows / Chrome 86.0.4240.111

2 réponses

Messages postés
30261
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2020
3 002
Bonjour,

A mon avis... tu n'as simplement pas vidé le cache de ton navigateur.
Si on prend cet exemple
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 100%;
 height: 100px;
 background: red;
}

 p{
 width: 100%;
 height: 100px;
 background: green;
}

div:nth-child(3){
 background: yellow;
}


 </style>
</head>
<body>

<div class="class1">
 DIV1
</div>
 <p>
 P1
 </p>

 <div class="class2">
  DIV2
 </div>
 <p>
 P2
 </p>

 <div class="class3">
  DIV3
 </div>
 <p>
 P3</p>

 <div class="class4">
  DIV4
  </div>
</body>
</html>

On voit bien que c'est la DIV2 qui est sélectionnée


Et si tu veux cibler la 4eme div ( peut importe qu'il y ait des <p> au milieu, tu peux utiliser
div:nth-of-type(4){
 background: white;
}

Messages postés
40
Date d'inscription
lundi 10 février 2020
Statut
Membre
Dernière intervention
25 octobre 2020

Merci pour ta réponse,
Qu'entends tu par "Vider le cache" ? Sauvegarder le script et recharger la page HTML ne suffit pas ?
Merci.
Messages postés
40
Date d'inscription
lundi 10 février 2020
Statut
Membre
Dernière intervention
25 octobre 2020

Je viens de tester le code que tu m'as fournis. Avec
div:nth-child(3){
 background: yellow;
}
, c'est le premier "div" qui se met en jaune avec Chrome. Bref, toujours le même problème d'incohérence.

Par contre, avec Internet Explorer, le code marche bien !
Messages postés
30261
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2020
3 002
J'ai fait mes tests avec chrome également... et tout fonctionne...

Comme je te l'ai dit.. je pense que ton souci vient uniquement d'un pb de cache.....
Vide complètement le cache de ton navigateur et/ou essaye en navigation privée.