@hax
junior developer

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

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

Сами циферки у меня - это элементы 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, то стиль применен не будет.
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Да, именно так и работает nth-of-type. То есть и иными словами, на CSS эта задача в чистом виде не выполнима.

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


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

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мая 2020, в 22:27
5000 руб./за проект
28 мая 2020, в 21:46
20000 руб./за проект
28 мая 2020, в 21:42
10000 руб./за проект