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>

Answer 1

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