Selecting second instance of identically named class using CSS Selectors



  • Given the following snippet:

    
    ```
    

    Some text Lorem ipusm

    All None

    • Postal newsletter
      Agree
      Disagree

    Some textLorem ipusm

    All None

    • Email newsletter
      Agree
      Disagree
    ```

    ...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



  • 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.


Log in to reply
 

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2