Unable to identify an element using preceeding-sibling

Question

The site - https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/ displays 'Multi Selection' options for the users to select different options.

I've identified the xpath to select 'Choice 6 2 3' which is (//span[text()='choice 6 2 3'])[1]

Additionally, I've also identified the parent of this element which is (//span[text()='choice 6 2 3'])[1]//parent::li[@class='ComboTreeItemChlid']

From here, how do I select 'Choice 6 2 2' using preceeding-sibling concept?

I tried using (//span[text()='choice 6 2 3'])[1]//parent::li[@class='ComboTreeItemChlid']//preceeding-sibling::li but displays nothing.

Answer 1

For your element there is only one parent li and for which class is not ComboTreeItemChlid, infact i could not find any li with this class in page. Anyway as you are using parent node no need to mention any attribute and below xpath with preceding-sibling will select option Choice 6 2 2

//span[text()='choice 6 2 3']//parent::li//preceding-sibling::li[1]

To select option Choice 6 2 1

//span[text()='choice 6 2 3']//parent::li//preceding-sibling::li[1]