Lists: Incremental CSS Selectors
Last updated
Last updated
This is another very crucial section that you need to understand in order to be able to build selectors. So do not skip this one!
Selectors have incremental numbers in lists.
For example, imagine that you want to store a complete list of hundreds of contacts from LinkedIn. In this case, the web elements (e.g., profile name, profile link, job position, etc.) inside of that list have an incremental selector.
Let's just copy the selectors of the profiles on LinkedIn’s search results. By copy, we mean this way of getting selectors: Copy Selectors. In this case, the selector corresponds to the contact’s profile name (first and last name):
li:nth-child(1) > div.abi-saved-contacts-row__details > button[type=”button”] > div > div > span
li:nth-child(2) > div.abi-saved-contacts-row__details > button[type=”button”] > div > div > span
As you can see, each CSS selector has a number that increments. For your convenience, we highlighted the incrementing number in red (see above). Now imagine that you want to save the entire list of these 100 contacts. To accomplish this, refer to the example in Save Lists and .
Let's continue with the example where you want to save a list of profiles from LinkedIn. As you have already learned, all the selectors in such a list will be the same and have an incremental number (as described above).
Now, however, you want to build your own custom selector.
There are two ways of dealing with it.
Use an addition in the form of >> nth=0 where 0 represents the incremental number, so it can be changed to nth=1, nth=2, etc., depending on which element in the list you want to address. Note that you cannot check correctness of it via document.querySelectorAll because this method is unique to ZeroWork.
Let's start with building the selector for name and surname on LinkedIn Sales Navigator (you can use LinkedIn free version instead -> you will just define a different selector compared to what you see below, but the steps are the same). You can see tag and attributes in the picture below.
A selector that proved robust enough is:
a[data-anonymize='person-name']
By entering it on the console and executing document.querySelectorAll("a[data-anonymize='person-name']"), you will get 25 results which correspond to 25 profiles on the page. (You will get 10 on LinkedIn free version.) This is exactly what we are looking for - remember the selectors for the items of the list are the same, and this is why the result is not unique.
You can now use >> nth= which would look like this:
a[data-anonymize='person-name'] >> nth=0
0 corresponds to the first item in the list. (>>nth= is a zero based system, meaning that 0 corresponds to the first item, 1 corresponds to the second item, etc.).
If you change 0 to 1, then you would be addressing the second item in this list:
a[data-anonymize='person-name'] >> nth=1
Another way is to add an addition to the incrementing element in the form of :nth-child(1), where 1 represents the incremental number, so likewise it can be changed to :nth-child(2), :nth-child(3), etc., depending on which element in the list you want to address.
The difference from the first method is that you need to find out which tag in the hierarchy structure increments and thus represents the list. This makes this method more difficult but also more precise.
Let's continue with the same example where the selector was this:
a[data-anonymize='person-name']
Now, your next step is to analyze the elements in the hierarchy to find out which one represent an incremental list. You may need to expand and collapse different elements to get an overview. At some point, you will see the structure shown below. You can see the incremental element with li as a tag, which corresponds to every card in the list. You can recognize it as list because all these li-tags are listed on the same level and when you hover over them, the elements in your list are highlighted.
Since the selector for name and surname is inside that element, you would need to place it after li to reflect the hierarchy. The final selector for this list would be:
li:nth-child(1) a[data-anonymize='person-name']
1 corresponds to the first item in the list. Note that :nth-child() is not a zero based system, meaning that 1 corresponds to the first item, 2 corresponds to the second item, etc.
If you change 1 to 2, then you would be addressing the second item in this list:
li:nth-child(2) a[data-anonymize='person-name']
If you want to address the whole list, you need to use {loop_index,1}, which is specific to ZeroWork application, and you can learn more about it here: .
The way you can address the whole list is by using {loop_index,1} again, as explained here: .
