18041 sujets

Questions générales et questions de débutants

Nth-child(even) ne fonctionne pas

Bonjour à tous,

Je suis débutante ++ et je souhaite créer un site web simple, j'ai installé l'application mimo qui est super pour ca, mais ils n'ont pas de communauté/forum pour s'aider lorsque l'on a un problème.
Alors voilà j'ai suivi les exercices de l'application concernant la rubrique "Make a website" (oui l'application est en anglais )
et un moment on a tout mis en page j'ai un deux pages et une fichier css.

Il faut utiliser nth-child(even) dans le fichier css pour colorer un "article" sur deux
en gros la page est très simple cest comme un tableau donc le but c'est de colorer en gris clair une ligne sur deux...
Je n'arrive pas a mettre l'image en pièce jointe sur le forum,

donc normalement le code fait en sorte qu'une ligne sur deux soit coloré mais elles le sont toutes si je met (odd) et aucune si je met (even) ou nimporte quel chiffre d'ailleurs. Je remarque qu'il y a une bande blanche entre chaque article mais je ne devrais pas les avoir et impossible de trouver sur le code html comment l'enlever.

Quelqu'un peut-il m'aider svp ???
Bonne journée !!
PS: les screens sont sur le logiciel ATOM

A quoi ressemble le site pour l'instant (cest ecrit nimporte quoi faite juste attention a la mise en page)
upload/1596228735-80668-blog.png

le code html de cette meme page :
upload/1596228856-80668-blog2.png

le code css de nth-child:

upload/1596228947-80668-blog3.png :

a noter l'image affiche nth-child(even) mais pour afficher les parties grises de la photo du site j'avais mis nth-child(odd).
Modérateur
Salut,

Pourquoi toujours rejeter la faute sur la propriété ? nth-child fonctionne bien, c'est toi qui l'utilise mal Smiley lol

nth-child va regarder l'ensemble des éléments frères ("noeud enfant") d'un même parent et il va en choisir certain. Pour l'exemple :
.post-container:nth-child(even)

Va sélectionner tout les élément qui ont la class .post-container et qui sont les enfants pair d'un meme parent, donc qui sont les enfants 2 4 6 8 etc... d'un même parent.
Ici, chaque #content à un seul enfant .post-container. Donc il n'y a jamais de 2nd, 4e, 6e... enfants a sélectionner. à chaque fois les .post-container sont unique et sont donc les premiers enfants.
Au passage grosse erreur : un id est unique et tu as plusieurs #content.
Pour utiliser nth-child il faut qu'il y ait plusieurs nœud. alors plutôt du genre :
<div id="content">
    <div class="post-container">1</div>
    <div class="post-container">2</div>
    <div class="post-container">3</div>
    <div class="post-container">4</div>
    <div class="post-container">5</div>
    <div class="post-container">6</div>
    <div class="post-container">7</div>
</div>


C'est plus clair ? Smiley smile

Bon apprentissage Smiley cligne
Sujet clos
Aller à