Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below.
How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately?
For example, selecting children 1-5, then 11-15, 21-25, 31-35, 41-45, and applying a red background to them.
This is my current approach, which currently only divides it into two sections, but I aim to divide it into four:
.children:nth-child(n+1):nth-last-child(n+51) {
background-color: red;
}
.children:nth-child(n+51) {
background-color: blue;
}