.container > div:nth-child(1n) {

1

Hi I’ve been trying to understand how does it work?
https://scrimba.com/p/pWqLHa/cg92LA6 (I don’t understand how the colors work)

.container > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
}

html, body {
  background-color: #ffeead;
  margin: 10px;
}

.container > div:nth-child(1n) {
  background-color: #96ceb4;	
}

.container > div:nth-child(3n) {
  background-color: #88d8b0;
}

.container > div:nth-child(2n) {
      background-color: #ff6f69;
}

.container > div:nth-child(4n) {
      background-color: #ffcc5c;
}

I can’t understand what ([number]n) means
For example if I delete
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
Why tile with number 4 has got red color?

2

Rather than try and re-explain the wheel, I’ll give you a good link:

4