Измените стиль, только если заголовок идет сразу после div с определенным классом

Question

В следующей разметке:

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<h3>A Header</h3>

Я хочу изменить цвет заголовка h3 на красный, только если он идет сразу после div с классом dynamic-div .

Как я могу сделать это с помощью CSS?

Answer 1

Добавьте следующий CSS, символ + является селектором соседнего брата

.dynamic-div + h3 {
  color: red;
}

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>
<h3>A Header</h3>
<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>
<h3>A Header</h3>
<h3>A Header</h3>

Answer 2

Должен работать следующий селектор:

div.dynamic-div + h3{
 color:red;
}

Объяснение:

• Родитель - это элемент h3 с классом .dynamic-div.
• +: элемент сразу после первого
• h3: применить стиль к элементам h3

Answer 3

Код CSS:

   .dynamic-div + h3 {
      color: red;
    }

Answer 4

Для каждого «H3» добавьте класс «Dynamic-div» и добавьте в CSS для этого класса строку.красный цвет" ;или что-то подобное