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

У меня есть HTML-тело, как в следующем фрагменте кода:

div.element>h1, h2, p {
  color: red
}

.footer {
  background-color: blue
}
<html>

<body>
  <div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>
</body>

</html>

Теперь я хотел бы закрасить все элементы " h1 ", " h2 " и " p ", которые являются дочерними элементами элемента " div " с class = "element", в красный цвет. Это означает, что " h2 " и " p " в нижнем колонтитуле div не должны быть окрашены в красный цвет, поскольку они не являются дочерними элементами для div с class = "element" .

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

div.element>h1, div.element>h2, div.element>p {}

Есть ли другой способ выбрать дочерних элементов div с разными тегами?

Обратите внимание, что я не хочу никаких ответов, предлагающих изменения в теле моего HTML-документа. Меня интересует только css-селектор. Мне также нужно иметь возможность выбрать его в JavaScript, используя querySelectorAll.

Всего 2 ответа


Если вы хотите использовать querySelectorAll , как вы сказали в комментариях к первому ответу (что было непонятно в вашем вопросе), тогда решение состоит в том, чтобы использовать два querySelectorAll последовательно.

document.querySelectorAll('div.element').forEach(
  el => el.querySelectorAll('h1, h2, p').forEach(
    el => el.style.color = 'red'
  )
);
.footer {
  background-color: blue
}
<div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>

Но в этот момент может быть проще использовать div.element>h1, div.element>h2, div.element>p в таблице стилей.


В ванильном CSS, самые чистые вы можете выбрать необходимые элементы внутри элемента <div> , примерно так

.element h1, .element h2, .element p {}

Если вы хотите более краткий и понятный код для CSS, вы всегда можете обратиться к SASS.

В SASS это будет выглядеть так:

.element { 
  h1, h2, p { 
    color: red 
  } 
} 

Вы можете найти SASS здесь: https://sass-lang.com/

Выбор в JS не изменится в зависимости от использования препроцессора. Все, что делает препроцессор, - это позволяет вам писать CSS определенным образом, а затем конвертировать его в обычный CSS для чтения браузером.

Следовательно, если вы хотите выбрать .element h1, .element h2, .element p самым чистым способом через JS, я бы дал этим конкретным элементам класс, например, «красный», а затем использовал бы этот класс в JS для их выбора.


Есть идеи?

10000