Select first element which is placed after another element but not immediately

user_7462275 0
Viewed 289

How is it possible to select only the first element (e.g. h2) after another element (e.g. h1) but which is not necessarily placed immediately after ?
So, element+element (e.g. h1 + h2) does not work because it selects elements that are placed immediately after elements

<h1> Title1 </h1>
..... <--! many tags but h2 -->
<h2> h2 Title2 selected </h2>
..... <--! many tags but h1 and h2-->
<h2> h2 Title3 not selected </h2>
css-selectors css
1 Answers

Now it's possible with one selector:

h1:first-of-type ~ h2:not(h1:first-of-type ~ h2 ~ h2) {
  color:red;
}
<div>
  <h2>h2 Title3 not selected </h2>
  <h1> Title1 </h1>
  <p>text</p>
  <h2> h2 Title2 selected </h2>
  <h3>text</h3>
  <h2> h2 Title3 not selected </h2>
</div>

Old Answer

I don't think you can achieve this with one selector, so you can try something like below:

h1:first-of-type ~ h2 {
  color:red;
}
h1:first-of-type ~ h2 ~ h2 {
  color:initial; /*we reset the style for the others*/
}
<div>
  <h2>h2 Title3 not selected </h2>
  <h1> Title1 </h1>
  <p>text</p>
  <h2> h2 Title2 selected </h2>
  <h3>text</h3>
  <h2> h2 Title3 not selected </h2>
</div>

user_86203330
Related