How can I simplify these CSS selectors?

user_18519363 0
Viewed 65

I have some code that I think may be bulky and could be simplified. I haven't found anything that helps in my situation. I am trying to make it so that when I hover over a div, an h2 and p get underlined. It works fine like this:

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

But I was wondering if I could simplify it in some way, not having to repeat .test:hover twice.

css-selectors css
3 Answers

If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:

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

An alternative would be to leverage a CSS preprocessor like Sass or Less, both of which support nesting which can make for DRY-er, more expressive style source code. This may be overkill in your case, though. Here's an example in Sass' SCSS format:

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

There is a new pseudo-class :is which will allow this..

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>

user_28020400

You can use it:

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

user_128630360
Related