CSS débutant - Sélectionner le nième enfant.
preliator13600
Messages postés
76
Statut
Membre
-
jordane45 Messages postés 40050 Statut Modérateur -
jordane45 Messages postés 40050 Statut Modérateur -
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 :
Et voici mon CSS :
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://www.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://www.zupimages.net/viewer.php?id=20%2F43%2Fg0z2.png
Je ne comprend pas trop. Est-ce un bug ?
Merci.
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://www.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://www.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
A voir également:
- CSS débutant - Sélectionner le nième enfant.
- Alexa pour enfant - Guide
- Logiciel de programmation pour débutant - Guide
- Logiciel montage vidéo débutant - Guide
- Selectionner texte sur pdf - Guide
- Comment sélectionner un message sur whatsapp pour y répondre - Guide
2 réponses
Bonjour,
A mon avis... tu n'as simplement pas vidé le cache de ton navigateur.
Si on prend cet exemple
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
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;
}
Qu'entends tu par "Vider le cache" ? Sauvegarder le script et recharger la page HTML ne suffit pas ?
Merci.