Как применить псевдоклассы first-of-type, last-of-type с селекторами атрибутов?

Question

[NameOf Var]

Всем привет. Хочу сверстать вот такой небольшой календарик:


Сами циферки у меня - это элементы button. У обычных циферок (на картинке это все циферки от 02 до 29) аттрибут value = "normal". А для выбранных (на картинке это 01 и 30) value = "selected". К сожалению, я не могу из когда добавлять для начальной даты что-то типо value = "selected_start" и для конечной "selected_end".

Ситуация теперь такая: я для всех button'ов, у которых имеется атрибут [value="selected"] изменить стиль. Но при этом для первого button'а с value="selected" я должен применить один стиль, а для второго - другой.

Я попробова сделать вот так:

button[value="selected"]:first-of-type {
}

button[value="selected"]:last-of-type {
}

Но данный код игнорирует условие [value="selected"]. То есть он работает, только если выбранны первый элемент (button с числом 01) и последний элемент (button с числом 30). Таким образом, если я выберу стартовую дату 02 и конечную дату 29, то стиль применен не будет.

Answer 1

[Rustam Bainazarov]

Да, именно так и работает nth-of-type. То есть и иными словами, на CSS эту задачу в чистом виде выполнить нельзя.

Но можно хаком:

button[value="selected"] {
  background: green;
  /* Все элементы с этим атрибутом */
}

button[value="selected"] ~ button[value="selected"] {
  background: red;
  /* Элемент, который идет после предыдущего с этим атрибутом и содержащий его же */
}

С учётом того, что у вас их всего два, то это будет работать нормально. Более того, с учётом этого же аспекта можно даже выбрать элементы по середине (так же хаком):

Comments

[NameOf Var]

фига се ты хитрюга)
У меня работает, спасибо за помощь!

[NameOf Var]

хм, у меня родился ещё такой вопрос.
Я когда навожу мышкой на кнопку, у нее меняется значение value="hovered"
Я хочу изменить стиль для первого выделенного элемента, если следом за ним идёт button[value="hovered"]. В голову приходит только
button[value="selected"] + button[value="hovered"], но в таком случае он применит стиль для button[value="hovered"], а мне нужно наоборот сделать. Не подскажешь, как это можно реализовать?

[Rustam Bainazarov]

NameOf Var, это возможно сделать только совсем упоротым хаком, но для этого потребуется выводить элементы в обратном порядке в HTML, чего делать категорически не стоит.

Так что только JS. В обратную сторону CSS идти не умеет (за исключением :focus-within, но это вообще иная песня).