I am testing a web application that uses highcharts. The selectors look like this, and the highchart number of the same chart is always different. For example:
#highcharts-4 >div:nth-child(1) > span > div > span
When there is only one chart on a page, I do the following, and it works perfectly:
[id^='highcharts-'] > div:nth-child(1) > span > div > span
It selects the first element where id
begins with the string 'highcharts-'
, but how can I select the second and the third elements if let's say I have several charts present on the same page?
For example, when there are three identical charts, the same element on each chart would have the following selectors with ID being different by two all the time:
#highcharts-4 >div:nth-child(1) > span > div > span
#highcharts-6 >div:nth-child(1) > span > div > span
#highcharts-8 >div:nth-child(1) > span > div > span
How can I grab the second and the third ones?