Как я могу упростить эти селекторы CSS?

У меня есть код, который, как мне кажется, может быть громоздким и может быть упрощен. Я не нашел ничего, что помогло бы в моей ситуации. Я пытаюсь сделать так, чтобы при наведении курсора на divh2 и p подчеркивались. Он отлично работает следующим образом:

.test:hover h2, .test:hover p {
  text-decoration: underline;
}

Но мне было интересно, могу ли я как-то упростить это, не повторяя .test:hover дважды.

Одним из вариантов может быть использование препроцессора CSS, такого как Сасс или Меньше, оба из которых поддерживают вложение, что может сделать исходный код DRY-er более выразительным. Хотя в вашем случае это может быть излишним.

Alexander Nied 30.03.2022 18:01
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
42
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Существует новый псевдокласс :is, который позволит это сделать.

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

.test:hover :is(h2, p) {
  color: red;
  text-decoration: underline;
}
<div class = "test">
  <h2>Heading</h2>
</div>

<div class = "test">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
Ответ принят как подходящий

Если вам не нужна поддержка Internet Explorer, это можно сделать с помощью :is псевдокласс:

.test:hover :is(h2, p) {
  text-decoration: underline;
}
<div class = "test">
  <h1>An H1</h1>
  <h2>An H2</h2>
  <p>A paragraph</p>
</div>

Альтернативой может быть использование препроцессора CSS, такого как Sass или Less, оба из которых поддерживают вложение, что может сделать исходный код DRY-er более выразительным. Хотя в вашем случае это может быть излишним. Вот пример в формате Sass SCSS:

.test:hover {
  h2, p {
    text-decoration: underline;
  }
}

Вы можете использовать его:

:is(h1, p) .test:hover { 
  text-decoration: underline; 
}

Другие вопросы по теме