是否可以使用纯 CSS 选择出现在另一个 HTML 元素之后的任何地方的 HTML 元素？

Question

Is it possible to select any/all <h1> element(s) which appear(s) after an <h2> element using pure CSS?

I have combed through pages of documentation for all of the CSS selectors and pseudo-classes and am unable to determine if it's possible to select certain elements which appear AFTER certain elements, both within the same branch and within a different branch of the HTML markup.

It seems as though the selectors and pseudo-classes are designed to only locate elements which are:

• Siblings
• Children
• Descendants

I am in need of finding additional relationships:

• Nieces
• Nephews
• Cousins
• Third cousins twice removed
• Granduncles
• Etc.

Which are logically AFTER a certain element in the tree. I never know:

• The exact relationship
• How many there will be of the elements I desire to select.

 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>

Answer 1

Is it possible to select any/all element(s) which appear(s) after an element using pure CSS?

Pure CSS? Yes
Browser support? Only Safari and newer versions of Chrome

Using the :has() pseudo class we can check descendants without targeting them directly:

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

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