Html Question posted in
Some basic documentation can be found here.

Html – Using CSS nth-child, how to iterate over X elements in groups of Y?

We have a series of items that are laid out in a rows in two-column display: grid.

We also have 5 branded colors: orange, blue, yellow, green, pink.

The background colors of the rows should iterate over those colors in order, e.g.:

  • Row 1: orange
  • Row 2: blue
  • Row 3: yellow
  • Row 4: green
  • Row 5: pink
  • Row 6: (back to the first of the 5 colors) orange
  • Row 7: blue
  • …etc.

I know how to iterate over every one item using :nth-child(5n + 1), as shown in the snippet below. This works fine if we have a <table> where each pair of items is enclosed in a <tr>.

But in this case the items are not grouped, and we want to iterate over every two items. How do we accomplish the effect of coloring by row?

ul {
  display: grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

li:nth-child(5n + 1) {
  background: orange;
}

li:nth-child(5n + 2) {
  background: blue;
}

li:nth-child(5n + 3) {
  background: yellow;
}

li:nth-child(5n + 4) {
  background: green;
}

li:nth-child(5n + 5) {
  background: pink;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
<ul>
Tags:

2

Answers


  1. 0

    One solution is to use 10n instead of 5n, so the first two elements will be li:nth-child(10n + 1), li:nth-child(10n + 2)

    ul {
  display: grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

li:nth-child(10n + 1),
li:nth-child(10n + 2) {
  background: orange;
}

li:nth-child(10n + 3),
li:nth-child(10n + 4) {
  background: blue;
}

li:nth-child(10n + 5),
li:nth-child(10n + 6) {
  background: yellow;
}

li:nth-child(10n + 7),
li:nth-child(10n + 8) {
  background: green;
}

li:nth-child(10n + 9),
li:nth-child(10n) {
  background: pink;
}
    <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <ul>
    Login or Signup to reply.
  2. 0

    You are using a fixed height for rows, so consider a gradient:

    ul {
  display: grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background:
    repeating-linear-gradient(
     orange 0 50px,
     blue   0 100px,
     yellow 0 150px,
     green  0 200px,
     pink   0 250px
    );
}
    <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search