Utilizing a tool called Stonly for adding tooltips, the CSS Selector is used to locate the HTML element for identifying the tooltip. Depending on the user input, a dynamic task list is generated. The challenge arises when trying to pinpoint a specific task, as its location within the list may vary. Each task is linked to a unique data element.
For instance:
<a data-beacon-article-modal="5ffe3f6fc64fe14d0e1fa33f">Follow-up with your Lender.</a>
Here is an example CSS Selector for one user's input (26th task in the list):
#root > div:nth-child(3) > div > div.container > div > div > div > div:nth-child(26) > div.accrd-cont > p:nth-child(1) > a
And this is the modified CSS Selector for a different input (25th task in the list):
#root > div:nth-child(3) > div > div.container > div > div > div > div:nth-child(25) > div.accrd-cont > p:nth-child(1) > a
Question: When searching for the location of data-beacon-article-modal="5ffe3f6fc64fe14d0e1fa33f", regardless of it being the 25th or 26th element, how should the CSS selector be structured based on the examples above?
Attempting to modify the selector by changing div:nth-child(26) to div did not yield the desired result. For example:
#root > div:nth-child(3) > div > div.container > div > div > div > div > div.accrd-cont > p:nth-child(1) > a[data-beacon-article-modal*="5ffe3f6fc64fe14d0e1fa33f"]