how to select nth item from a CSS selector

Question

[data-short-caption="itemName" i] .circle-base,

this selector is identifying two items in the DOM, I need to select the second item, is there any way like we have in xpath to select the second item?

The HTML Structure is something like this:

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> </div>
    </div>
    
    <div data-short-caption='itemName'>
     <div class=circle-base> </div>
    </div>
</div>

score 2 · Answer 1 · edited Jun 01 '23 at 22:32

2

As per the HTML:

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> </div>
    </div>

    <div data-short-caption='itemName'>
     <div class=circle-base> </div>
    </div>
</div>

To identify only the second item you can use either of the following css-selectors based Locator Strategy:

Using nth-child():

div.selection div:nth-child(2) > div.circle-base

Using nth-of-type():

div.selection div:nth-of-type(2) > div.circle-base

edited Jun 01 '23 at 22:32

Benjamin Loison

3,782
4
16
33

answered Sep 09 '20 at 12:46

undetected Selenium

183,867
41
278
352

I am extremely sorry, I should have added the HTML code, now you would have a better understanding. – Sanat Sep 09 '20 at 12:55
@Sanat You need to show us the parent node as well i.e a bit more of the outerHTML. – undetected Selenium Sep 09 '20 at 12:58
Updated, sorry for the trouble. – Sanat Sep 09 '20 at 13:03
and the key point to remember is, we need to take the reference of itemName, as there are other items as well in the dom. – Sanat Sep 09 '20 at 13:05
@Sanat Checkout the answer update and let me know the status. – undetected Selenium Sep 09 '20 at 13:09
Close enough, but as I mentioned in the previous comment, we need to take reference of the item name, as there are multiple items, and among them, one item is coming two times. which is given here as "itemName" – Sanat Sep 09 '20 at 13:19
I tried using div.selection div[data-short-caption=itemName]:nth-child(3) > div.circle-base, but didn't work out – Sanat Sep 09 '20 at 13:21
`data-short-caption='itemName'` is common for both the first and second element and so is their child. You can only distinctly identify by their position with respect to their parent/ancestor. had **itemName** had been unique our task would have been much easier. – undetected Selenium Sep 09 '20 at 13:22

score 1 · Answer 2 · answered Sep 15 '20 at 13:44

If I could correctly understand your query, there are several ways to achieve it via css pseudo-selectors. Please check the code if it helps.

/*Method 1 : using last-of-type pseudo-selector*/
[data-short-caption="itemName" i]:last-of-type .circle-base{
  background-color: #efefef;
}
/*Method 2 : using last-child pseudo-selector*/
[data-short-caption="itemName" i]:last-child .circle-base{
  background-color: #efefef;
}
/*Method 3 : using nth-of-type pseudo-selector*/
[data-short-caption="itemName" i]:nth-of-type(2) .circle-base{
  background-color: #efefef;
}
/*Method 4 : using nth-child pseudo-selector*/
[data-short-caption="itemName" i]:nth-child(2) .circle-base{
  background-color: #efefef;
}

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> first child </div>
    </div>
    
    <div data-short-caption='itemName'>
     <div class=circle-base> second child </div>
    </div>
</div>

how to select nth item from a CSS selector

2 Answers2

Linked