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:
I am in need of finding additional relationships:
Which are logically AFTER a certain element in the tree. I never know:
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.