How to select multiple CSS parent and descendant groups efficiently

Question

Is there a more efficient way to select multiple parent and descendant groups?

What I have now:

aside p, aside h1, aside h2, aside h3, aside h4,
article p, article h1, article h2, article h3, article h4,
section p, section h1, section h2, section h3, section h4 {
  width: 75%;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
}

Answer 1

:matches()

You can use the :matches() CSS pseudo-class function to group your parents and descendants:

:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

Note that, at the time of writing, this is still an experimental technology, so you may want to view the browser compatibility before using this in production.

Older browsers may require using the vendor-prefixed pseudo-class :any():

:-moz-any(aside, article, section) :-moz-any(p, h1, h2, h3, h4),
:-webkit-any(aside, article, section) :-webkit-any(p, h1, h2, h3, h4),
:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

According to CSSWG issue #3258, :matches() might be renamed to :is() in the future:

:is(aside, article, section) :is(p, h1, h2, h3, h4)

Answer 2

You could remove all the tag specificity.

p, h1, h2, h3, h4 {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}