nth-child in CSS

by jshacker

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  gap: 1rem;
}
div {
  margin: 0 1rem;
  font-size: 3rem;
  counter-increment: count;
}
div::before {
  content: counter(count);
}
div:nth-child(2n) {
  color: red;
}
div:nth-child(2n + 1):nth-child(5n) {
  color: blue;
}
div:nth-child(2n):nth-child(5n) {
  color: green;
}