2
votes

Exemple CSS - nth-child ()

Étant donné l'exemple ci-dessous, chaque ligne doit avoir trois colonnes de texte, c'est-à-dire trois phrases, où celles du milieu doivent également avoir une background-color . Est-il possible de faire cela avec le nth-child () selector?

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

p {
  display: inline-block;
  width: 30%;
}

p:nth-child(2n+0) {
  background: red;
}

html css css-selectors

1 commentaires

Bonjour @Bst_coder Essayez ceci p: nth-child (3n + 2) {background: red; }

3 Réponses :

0
votes

Bien que cela puisse être fait, je ne le ferais pas de cette façon. Mais dans l'intérêt d'obtenir le style que vous voulez - si le nombre et l'alignement sont toujours comme vous l'avez ici, vous pouvez le faire comme suit.

Cela donnera les lignes de p éléments et donnera une couleur d'arrière-plan l'élément p du milieu dans chaque ligne - créant ainsi un effet de «colonne». mais vous devriez vraiment utiliser une meilleure structure HTML.

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

p {
display:inline-block;
width:30%;
}

p:nth-child(2), 
p:nth-child(5), 
p:nth-child(8) {
  background: red;
}

1 commentaires

Vous devriez également donner un exemple de la meilleure structure HTML à laquelle vous faites allusion.

5
votes

Vous pouvez utiliser

p:nth-child(3n+2) {
  background: red;
}

0 commentaires

2
votes

utilisez flex pour wrap et pour p utiliser p: nth-child (3n + 2)

<div class="wrap">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
</div>

.wrap{
display:flex;
flex-wrap: wrap;
}

p {
flex: 1 0 33%;
}

   p:nth-child(3n+2){
  background: red;
}

0 commentaires