CODEWITHSUNDEEP
csscss-selectors
Stef1611
Stef1611

Reputation: 2409

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

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>

Upvotes: 4

Views: 444

Answers (1)

Temani Afif
Temani Afif

Reputation: 274225

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>

Upvotes: 6

Related Questions