CSS - пример nth-child ()

Question

Учитывая приведенный ниже пример, каждая строка должна иметь три текстовых столбца, то есть три предложения, где средние также должны иметь background-color. Возможно ли это сделать с помощью селектора nth-child() ?

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

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

<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>

Answer 1

Вы можете использовать

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

Answer 2

используйте flex до wrap и p используйте p:nth-child(3n+2)

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

p {
flex: 1 0 33%;
}

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

<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>

Answer 3

Хотя это можно сделать - я бы так не поступил. Но в интересах получения желаемого стиля - если число и выравнивание всегда такие, как у вас здесь, вы можете сделать это следующим образом.

Это даст строки из p-элементов и даст цвет фона для среднего p-элемента в каждой строке, создавая тем самым эффект «столбца». но вы действительно должны использовать лучшую структуру HTML.

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

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

<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>