Является ли допустимым перечисление псевдоклассов в CSS через запятую?

Question

Подскажите, пожалуйста, является ли допустимым перечислять несколько CSS-псевдоклассов внутри одного селектора? То есть, *:hover, active (например).

.btn_copy:hover, active {
     background: #9afff0;
     text-shadow: 0 0 0 2px;
     border: 1px solid orange;
     border-radius: 3px;
}
<button class="btn_copy">Копировать</button>

Я заметил, что данный способ объединения псевдоклассов, в целом, работает (если требуется объединить оформление для нескольких состояний кнопки), но является ли он допустимым? Можно ли его применять повсеместно, где это требуется?

Заранее благодарю.

Answer 1

Так делать можно, только указывать класс все равно нужно с точкой

.btn_copy:hover, .active {...}

Answer 2

Вы можете использовать старый синтаксис (на 10 мая 2024 поддержка браузерами - 96.97%):

.btn_copy:hover,
.btn_copy:active,
.btn_copy:disabled {
}

или использовать современный синтаксис (поддержка браузерами - 96.94%):

.btn_copy:is(:hover, :active, :disabled) {
}

или так (поддержка браузерами - 86.93%):

.btn_copy {
  &:hover,
  &:active,
  &:disabled {
  }
}

Но лучше всего будет использовать постобработку CSS. Таким образом вы пишете код любым способом, лишь бы он был валидным, а постобработчик уже без вас подумает как ваш код оптимизировать.

БЛОГ НА HUSL

Является ли допустимым перечисление псевдоклассов в CSS через запятую?

Ответы (2 шт):