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

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.