Selecting second instance of identically named class using CSS Selectors

Question

Given the following snippet:

<div class="page-block__content">
 <div class="page-cards">
 <div class="statement">
 <div class="statement-text">
 <p>Some text <a href="https://mywebsite.index.html" target="_blank">Lorem ipusm </p></div>
 <div class="page-card">
 <header class="page-card__header">
 <h2 class="page-card__title"></h2>
 <p class="page-card__success">
 <a href="#" class="all-data"><i class="fa fa-check-circle"></i> All</a>
 <a href="#" class="no-data"><i class="fa fa-times-circle"></i> None</a>
 </p>
 </header>
 <section class="page-card__body">
 <fieldset class="permissions-block__container">
 <ul class="permissions-block__list">
 <li class="permissions-block__item">
 <span>Postal newsletter</span>
 <div class="permissions-block__option permissions-block__option--agree">
 <input name="424234" type="radio" id="option-agree-424234" value="2" checked="">
 <label for="option-agree">Agree</label>
 </div>
 <div class="permissions-block__option permissions-agree--disagree">
 <input name="v5L6r" type="radio" id="option-disagree-424234" value="1">
 <label for="option-disagree">Disagree</label>
 </div>
 </li>
 </ul>
 </fieldset>
 </section>
 </div>
 </div>
 <div class="statement">
 <div class="statement-text">
 <p>Some text<a href="https://mywebsite.index.html" target="_blank">Lorem ipusm </p></div>
 <div class="page-card">
 <header class="page-card__header">
 <h2 class="page-card__title"></h2>
 <p class="page-card__success">
 <a href="#" class="all-data"><i class="fa fa-check-circle"></i> All</a>
 <a href="#" class="no-data"><i class="fa fa-times-circle"></i> None</a>
 </p>
 </header>
 <section class="page-card__body">
 <fieldset class="permissions-block__container">
 <ul class="permissions-block__list">
 <li class="permissions-block__item">
 <span> Email newsletter</span>
 <div class="permissions-block__option permissions-block__option--agree">
 <input name="RXkFd" type="radio" id="option-disagree-545466" value="2" checked="">
 <label for="option-agree">Agree</label>
 </div>
 <div class="permissions-block__option permissions-block__option--disagree">
 <input name="RXkFd" type="radio" id="option-disagree-545466" value="1">
 <label for="option-disagree">Disagree</label>
 </div>
 </li>
 </ul>
 </fieldset>
 </section>
 </div>

...in which the classes "all-data" and "no-data" appear twice in the html with no other unique tags to hang off, how can I select the second instance of e.g. "no-data". I have tried

'a.no-data:nth-child(1)'

and also

'a.no-data:nth-of-type(1)'

...but neither works. Is there another method I can try? I don't want to use Xpath, this is using Puppeteer not selenium.

Thanks

• demouser123: Can you add the complete snippet of how the class appear multiple times?
• Steerpike: @demouser123 thanks, I've included the complete snippet now

Answer 1

nth-child is used for list.

In this case you need to identify a unique parent or sibling.

I see that page-cards has multiple child statement.
If you have only 2 statement elements and the order is always the same then:

.statement a.no-data will select the first
.statement + .statement a.no-data will select the second

If the link is unique, you could use it in an Xpath.