CSS selector with multiple same classes under different divs

Question

Example of the Problem:

<div>
  <h2> one
<div>
  <h2> two
<div>
  <h2> three

I want to select the second h2 with css. I know there is something like h2:nth-child(), but this does not work here because every h2 is child(1) under the divs. So how do I get this specific item?

Answer 1

In this case, you have to use nth-child() on the div. This will return a WebElement object. Then you search for the h2 inside this WebElement.

Answer 2

You should be able to use a combination of :nth-of-type() and :has() pseudoselectors like

div:has(h2):nth-of-type(even) h2{
  color: red;
}

Assuming you meant the following HTML (your example was missing end tags and was therefore ambiguous) the CSS above would match only h2 tags, which are inside every second div tag with h2 descendants.

<div>
  <h2> one</h2>
</div>
<div>
  <h2> two</h2>
</div>
<div>
  <h2> three</h2>
</div>