Как выбрать и применить стили к элементам в последнем ряду 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. <br/> <br/> Для начала попробуем выбрать первый элемент последнего <i>неполного</i> ряда. Селектор <code>:nth-child(3n + 1)</code> выберет нам первые элементы каждого ряда. <br/> <br/> Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем <code>:nth-last-child(-n + 2)</code> . <br/> <br/> В итоге получили селектор <code>:nth-child(3n + 1):nth-last-child(-n + 2)</code> . <br/> Ну а дальше воспользуемся селектором <code>~</code> что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного. <br/> <br/> Получается вот такой код: <br/> <pre><code class="css">li:nth-child(3n + 1):nth-last-child(-n + 2),
li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
background: #ed1c24;
}</code></pre> <br/> <br/> UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить <code>-n + 2</code> на <code>-n + 3</code> . <br/> <br/>