Как выбрать элементы удовлетворяющие условию выборки?

Question

[DZHAMBUALT]

Здрасте! У меня есть некий flex контейнер элементы в котором расположены в рядах по 3. У меня в последнем ряду вместо 3 могут располагаться 1 (пример 1) или 2 (пример 2) элементов. Мне нужно выбрать эти элементы и применить к ним стили. Вот рисунок с иллюстрацией. Мне нужно выбрать элементы помеченные красным:


Я немного поэкспериментировал с селекторами :last-child и :nth-child и у меня получилось выбрать последний элемент как на примере 1 с помощью этой записи item:last-child:nth-child(3n + 1).

Вот сам код

Comments

[Ivan Ustûžanin]

так по аналогии
один:
:nth-last-child(1):nth-child(3n + 1)
первый из двух:
:nth-last-child(2):nth-child(3n + 1)
второй из двух:
:nth-last-child(2):nth-child(3n + 1) + *
или
:nth-last-child(1):nth-child(3n + 2)

[Алексей Уколов]

А если в последнем ряду три элемента, то ни один не должен быть выбран?

[xdevelx]

https://codepen.io/xdevelx/pen/OJeNxrG?editors=1100

Answer 1

[Lynn «Кофеман»]

Поиграть со селекторами 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 {
  .....
}

UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить -n + 2 на -n + 3.

UPD2: можно пойти немного другим путём и выбирать все элементы после последнего элемента в полном ряду. Получится вот так:

li:nth-child(3n):nth-last-child(-n + 3) ~ li {
  .....
}