Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Question

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS?

I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFTER other elements, whether they are in the same branch or a different branch of the HTML markup.

It appears that existing selectors and pseudo-classes are limited to identifying elements that are:

Siblings
Children
Descendants

I am looking for relationships beyond these traditional ones:

Nieces
Nephews
Cousins
Third cousins twice removed
Granduncles
And so on...

These elements would logically appear AFTER a specific element in the HTML structure. However, I cannot predict:

The exact nature of the relationship
How many instances of the desired elements there will be.

Example 1 - Niece
<div>
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 2 - Cousin
<div>
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 3 - Granduncle
<div>
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>

html css css-selectors xhtml pseudo-class

Answer 1

Answer №1

Is it feasible to pick any/all individual(s) that appear after an element by using only CSS?

Using solely CSS? Yes
Supported browsers? Limited to Safari and newer versions of Chrome

By utilizing the :has() pseudo-class, we can assess descendants without directly targeting them:

:root {
  --good-browser-support: skyblue;
  --emerging-browser-support: coral;
}

.example :has(h2)+ :is(h1, * h1) {
  /* Ancestor to sibling */
  color: var(--emerging-browser-support);
}

.example :has(h2)+* h1 {
  /* Ancestor to descendant */
  color: var(--emerging-browser-support);
}

.example h2+h1 {
  /* Subsequent siblings */
  color: var(--good-browser-support);
}

.example h2+* h1 {
  /* Nieces */
  color: var(--good-browser-support);
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

Simplified version:

:is(.example :has(h2)+ :is(h1, * h1), .example :has(h2)+* h1, .example h2 + h1, .example h2 + * h1) {
  color: magenta;
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

Answer 2

Is it feasible to pick any/all individual(s) that appear after an element by using only CSS?

Using solely CSS? Yes
Supported browsers? Limited to Safari and newer versions of Chrome

By utilizing the :has() pseudo-class, we can assess descendants without directly targeting them:

:root {
  --good-browser-support: skyblue;
  --emerging-browser-support: coral;
}

.example :has(h2)+ :is(h1, * h1) {
  /* Ancestor to sibling */
  color: var(--emerging-browser-support);
}

.example :has(h2)+* h1 {
  /* Ancestor to descendant */
  color: var(--emerging-browser-support);
}

.example h2+h1 {
  /* Subsequent siblings */
  color: var(--good-browser-support);
}

.example h2+* h1 {
  /* Nieces */
  color: var(--good-browser-support);
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

Simplified version:

:is(.example :has(h2)+ :is(h1, * h1), .example :has(h2)+* h1, .example h2 + h1, .example h2 + * h1) {
  color: magenta;
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Answer №1

Similar questions

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

Using JQuery to conceal floated divs

Animating CSS when closing a modal box

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

AngularJS: A Step-By-Step Guide to Adding Two Values

My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

"jQuery Hide-and-Seek: A Fun Way to Manip

Sending HTML parameters to a PHP file

What is the best way to add an image using a div in React?

What is the process for incorporating Bootstrap 5 animation into a website?

Creating JavaScript functions that accept three inputs and perform an operation on them

Struggling to figure out the correct method for aligning calendar using bootstrap-datetimepicker?

Extract data from the HTML source code in JavaScript and transfer it to a personalized JavaScript variable within Google Tag Manager

Issues with Flex layout in Firefox causing functionality errors

Steps for filling an HTML table within a dynamically loaded DIV

Emphasize the checkbox

The Cascading of Bootstrap Card Designs

Sliding Toggle: Panel Revealed with Button Slide

Utilizing unique symbols to dynamically add form elements to an HTML page with jQuery's append method

Adjust the dropdown width based on the screen's resolution