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

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

1 голос
/ 25 марта 2020

У меня есть 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.element>h1, div.element>h2, div.element>p {}

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

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

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Если вы хотите использовать 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 вместо таблицы стилей.

1 голос
/ 26 марта 2020

В ванили 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, я бы дал этим указанным c элементам класс, например, "red", и затем используйте этот класс в JS, чтобы выбрать их.

...