3

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

  • 1
    Can you add the complete snippet of how the class appear multiple times? – demouser123 Nov 7 '18 at 15:42
  • @demouser123 thanks, I've included the complete snippet now – Steerpike Nov 9 '18 at 12:38
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.