%h3 Первый вариант
%ol.v1
- (1..4).each do
%li
%ol.v1
- (1..5).each do
%li
%ol.v1
- (1..6).each do
%li
%h3 Второй вариант
%ol.v2
- (1..4).each do
%li
%ol.v2
- (1..5).each do
%li
%ol.v2
- (1..6).each do
%li
View Compiled
ol {
display: inline flex;
width: 160px;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
li {
list-style: inside decimal;
font-size: 16px;
padding: 2px;
aspect-ratio: 1;
flex: 45px 0 0;
background: #b5e61d;
box-sizing: border-box;
margin: 2px;
}
.v1 li:nth-child(3n + 1):nth-last-child(-n + 2),
.v1 li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
background: red;
}
.v2 li:nth-child(3n):nth-last-child(-n + 3) ~ li {
background: cyan;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.