CSS nth-child circular styling

Question

I have a sequence of 6 colors:

• Red

• Green

• Blue

• Cyan

• Magenta

• Yellow

Whereas element 1 is red.

Element 2 is green… etc.

The list can have an unlimited number of items, and the color sequence should be kept.

The easiest way would be to use nth-child(n%6), but we know that there's no module operator for nth-child.

The sequence:

• nth-child(n): Red
• nth-child(2n): Green
• nth-child(3n): Blue
• nth-child(4n): Cyan
• …

Wouldn't work, since the 8th element would be Cyan, but it should instead be Green.

An offset wouldn't work either as it would work only for the first occurrences.

Can this problem be solved?

Answer 1

You can do like this

• nth-child(6n-5) for every 6:th, start at 6-5 = 1
• nth-child(6n-4) for every 6:th, start at 6-4 = 2
• etc.
• nth-child(6n-0) for every 6:th, start at 6-0 = 6 (can be written as nth-child(6n))

or like this (updated and maybe more appropriate in this case)

• nth-child(6n+1) for every 6:th, start at 1
• nth-child(6n+2) for every 6:th, start at 2
• etc.
• nth-child(6n+6) for every 6:th, start at 6 (can be written as nth-child(6n))

/* left div's */
.left div:nth-child(6n-5) {
  background: red;
}
.left div:nth-child(6n-4) {
  background: green;
}
.left div:nth-child(6n-3) {
  background: blue;
}
.left div:nth-child(6n-2) {
  background: cyan;
}
.left div:nth-child(6n-1) {
  background: magenta;
}
.left div:nth-child(6n) {
  background: yellow;  
}
/* right div's */
.right div:nth-child(6n+1) {
  background: red;
}
.right div:nth-child(6n+2) {
  background: green;
}
.right div:nth-child(6n+3) {
  background: blue;
}
.right div:nth-child(6n+4) {
  background: cyan;
}
.right div:nth-child(6n+5) {
  background: magenta;
}
.right div:nth-child(6n) {
  background: yellow;  
}

/* for this demo only */
div div:nth-child(6n) + div {
  margin-top: 15px;  
}
.left, .right {
  display: inline-block;
  width: 33%;
}

<div class="left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>  
</div>
<div class="right">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>  
</div>

Answer 2

but we know that there's no module operator for nth-child.

What makes you think :nth-child has no modulus syntax?

If you want :nth-child(x), where x ∈ ℤa and a ∈ ℕ, then the syntax is

:nth-child(an + b)

where b ∈ ℤ is any representative of x such that b < a.

As you can see in LGSon's answer, usually b is chosen in one of these sets

• {0, 1, …, a-1}
• {-a, -a+1, …, -1}
• {-a+1, …, -1, 0}

Note: In this answer, ℤa means ℤ⧸aℤ, that is, the integers modulo a.