Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS nth-child: every 3rd element starting from the 4th

Tags:

html

css

I'm trying to select every 3rd section tag but starting from the fourth. So the bold elements below would indicate those that I would like to select:

  1. section
  2. section
  3. section
  4. section
  5. section
  6. section
  7. section
  8. section
  9. section

I've tried the following code but it doesn't appear to be working

section:nth-child(3n+1)

1 Answers

If you want to start from the 4th element use +4 not +1

section:nth-child(3n+4) {
  color: red;
}
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
like image 123
Turnip Avatar answered Sep 12 '25 23:09

Turnip