CODEWITHSUNDEEP
htmlcsscss-selectors
Bst_coder
Bst_coder

Reputation: 131

CSS - nth-child() example

Given the example below, each row needs to have three text columns, i.e. three sentences, where the middle ones also need to have a background-color. Is it possible to do that with the nth-child() selector?

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>

Upvotes: 2

Views: 670

Answers (3)

לבני מלכה
לבני מלכה

Reputation: 16251

use flex to wrap and to p use 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>

Upvotes: 2

ne1410s
ne1410s

Reputation: 7082

You could use

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

Upvotes: 5

gavgrif
gavgrif

Reputation: 15499

Whilst it can be done - i would not do it this way. But in the interest of getting the styling that you want - if the number and alignment is always as you have it here then you can do it as follows.

This will give the rows of p elements and will give a background color on the middle p element in each row - thereby creating a "column" effect. but you really should use a better HTML structure.

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>

Upvotes: 0

Related Questions