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

Adjust the height of the drawer in material-ui

The content within the iframe is not properly sized

Need to update various form fields at once with jquery?

I am experiencing some unwanted movement of divs when I hide one element and show another. Is there a way to prevent this from happening

I'm struggling to locate the space that should be between these elements

Is it possible to convert HTML to PDF on the server?

Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

Adjust the colors of the borders upon clicking the button

Modify button behavior on click after the initial press

Is it possible to prioritize CSS selectors in a specific sequence?

Utilizing a jQuery plugin for input file validation

Tips for using jQuery to add or append a class to the final li element

Conceal the initial modal beneath the overlay when the second modal is activated

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Let's talk about the CSS properties for centering content and automatically

Using AJAX to send data with a POST request in Django may not function properly

Unexpected behavior observed with field alignment

Creating Images that appear optimized on smaller screens - the art of responsive design!

The element is not positioned correctly due to the absolute positioning