У меня есть код, который, как мне кажется, может быть громоздким и может быть упрощен. Я не нашел ничего, что помогло бы в моей ситуации. Я пытаюсь сделать так, чтобы при наведении курсора на div
h2
и p
подчеркивались. Он отлично работает следующим образом:
.test:hover h2, .test:hover p {
text-decoration: underline;
}
Но мне было интересно, могу ли я как-то упростить это, не повторяя .test:hover
дважды.
Существует новый псевдокласс :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;
}
Одним из вариантов может быть использование препроцессора CSS, такого как Сасс или Меньше, оба из которых поддерживают вложение, что может сделать исходный код DRY-er более выразительным. Хотя в вашем случае это может быть излишним.