是否有CSS选择器可在整个页面中定位给定类型的第n个元素？

Question

I have Selenium-based tests that validate a page with several H2 sections. The sections used to belong to the same parent, so it was easy to assert for an expected text using CSS selectors (I use FluentAutomation API):

I.Expect.Text("Section Title").In("h2:nth-of-type(2)")

Now the page design has changed, so H2 sections are placed under different DIVs, so each of them is now 1st child if its parent. Now the selector h2:nth-of-type(1) selects all H2 sections, and h2:nth-of-type(2) selects none.

I would like not to be dependent on the structure of DIVs when selecting H2 sections. What I am trying to achieve is to select nth element of H2 type across the entire page. I know this is easy using jQuery, but is this possible using CSS syntax?

Answer 1

Simply change the target to point to your new <div> elements instead:

div:nth-of-type(1) h2 { ... }
div:nth-of-type(2) h2 { ... }

This obviously depends on how many divider elements are on your page. If you are using dividers not just to contain <h2> elements you could always give them a new class:

<div class="h2-container">
    <h2>Hello, world!</h2>
</div>

div.h2-container:nth-of-type(1) h2 { ... }
div.h2-container:nth-of-type(2) h2 { ... }

This does assume that all your divider elements are under the same parent, however.