CSS - Можно ли выбрать несколько разных дочерних элементов в родительском без повторения родительского?

Question

Я весь день перебирал селекторы CSS, пытаясь найти ответ на этот вопрос, потому что он кажется таким простым, но я не могу найти решения для себя.

Учитывая структуру, подобную:

<div id="about>
    <h1></h1>
    <h2></h2>
    <h3></h3>
</div>

Я хочу сделать все заголовки другой гарнитурой, специфичной для этого подразделения, используя один селектор.

Обычно мои селекторы были бы:

#about h1,
#about h2,
#about h3 {
}

Что сейчас действительно кажется неэффективным.Есть ли способ сопоставить удостоверение личности?

#about h1 + h2 + h3 (incorrect)

Есть ли что-то похожее на:

#about (h1,h2,h3)

Мне кажется, что это должно быть очевидно, но я никогда не видел такой выбор.

Answer 1

В простом CSS это невозможно. Если вы установите класс в заголовочных тегах, вы можете настроить их с помощью одного селектора.

Используя что-то вроде less , вы можете сделать:

#about {
  h1, h2, h3 { ... }
}

Answer 2

Чтобы завершить ответ Guffa, если вы не можете использовать предварительную обработку на стороне сервера и вам нужно настроить таргетинг только на Firefox и Chrome, вы также можете использовать

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

, в этом случае вы будете использовать этот псевдокласс таким образом

#about :-moz-any(h1, h2, h3) { ... }

в противном случае единственный кросс-браузерный метод без использования less или sass, уменьшающих количество правил, - это универсальный селектор

#about > *

, но он будет нацелен на каждого непосредственного потомка #about, и этопо сути неэффективно.