0

In the following markup:

<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>

I want to change the colour of a h3 header in red only if it comes right after a div with class dynamic-div.

How can I do that with CSS?

kukkuz
  • 41,512
  • 6
  • 59
  • 95
user1941537
  • 6,097
  • 14
  • 52
  • 99
  • Duplicated question here : [select-first-occurring-element-after-another-element](https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element) – Shim-Sao Jun 17 '19 at 10:09

4 Answers4

5

Add the following CSS, the + symbol is the adjacent sibling selector

.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>
metaDesign
  • 618
  • 3
  • 15
1

The following selector should work:

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

Explanation:

  • Parent is a h3 element with the class .dynamic-div.
  • +: The element right after the first one
  • h3: Apply the style to h3 elements
Felipe Sulser
  • 1,185
  • 8
  • 19
  • The right parent path is : `div.dynamic-div + h3` [select-first-occurring-element-after-another-element](https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element) – Shim-Sao Jun 17 '19 at 10:07
  • Oops, forgot that it was a div and not an h3 element. Thanks – Felipe Sulser Jun 17 '19 at 10:22
0

CSS Code:

   .dynamic-div + h3 {
      color: red;
    }
Ghoul Ahmed
  • 4,446
  • 1
  • 14
  • 23
Leo _Roy
  • 25
  • 1
  • 8
-2

For each "H3" add the class "Dynamic-div" and add to the css for that class the line. color: "red" ; or something similar

Aldegheri Alessandro
  • 11
  • Adding class to h3 only works if you can change the code. It not respond to the question. [select-first-occurring-element-after-another-element](https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element) – Shim-Sao Jun 17 '19 at 10:07