CSS débutant - Sélectionner le nième enfant.
preliator13600
Messages postés
67
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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.
- Logiciel de programmation pour débutant - Guide
- Alexa pour enfant - 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;
}
Je viens de tester le code que tu m'as fournis. Avec
Par contre, avec Internet Explorer, le code marche bien !
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 !
Qu'entends tu par "Vider le cache" ? Sauvegarder le script et recharger la page HTML ne suffit pas ?
Merci.