Как выбрать и применить стили к элементам в последнем ряду flex контейнера, когда в этом ряду может быть 1 или 2 элемента вместо обычных 3? Прилагается иллюстрация.
Для выбора элементов в последнем ряду flex контейнера можно воспользоваться псевдоклассом ":last-child" в сочетании с условием "nth-child(n)". Например, если в последнем ряду может быть 1 или 2 элемента, то можно применить следующие стили:
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 0 30%; /* устанавливаем ширину элементов в 30% */
}
.flex-item:nth-child(3n+1):last-child,
.flex-item:nth-child(3n+2):last-child,
.flex-item:nth-child(3n):last-child {
/* стили для элементов в последнем ряду */
}
```
В данном примере с помощью псевдокласса ":last-child" выбираются элементы, которые являются последними в ряду, независимо от их количества. Таким образом можно применить стили только к элементам, которые находятся в последнем ряду, независимо от их количества.
Поиграть со селекторами nth-child и nth-last-child.
Для начала попробуем выбрать первый элемент последнего неполного ряда. Селектор:nth-child(3n + 1)выберет нам первые элементы каждого ряда.
Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем:nth-last-child(-n + 2).
В итоге получили селектор:nth-child(3n + 1):nth-last-child(-n + 2).
Ну а дальше воспользуемся селектором~что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного.
Получается вот такой код:
li:nth-child(3n + 1):nth-last-child(-n + 2), li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li { background: #ed1c24; }
UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить-n + 2на-n + 3.