> For the complete documentation index, see [llms.txt](https://docs.zerowork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/lists-incremental-css-selectors.md).

# Lists: Incremental CSS Selectors

Understanding incremental selectors is important when working with lists.

For example, imagine that you want to save a list of hundreds of contacts from LinkedIn. In this case, the web elements inside that list, such as profile name, profile link, or job position, often have selectors that differ only by an **incremental number**.

### When Copying Selectors

Let's copy the selectors of profiles in LinkedIn search results using the method described in [Copy Selectors](/using-zerowork/using-selectors/copy-selectors.md). In this example, the selector corresponds to the contact's profile name:

<mark style="background-color:yellow;">li:nth-child(</mark><mark style="background-color:yellow;">**1**</mark><mark style="background-color:yellow;">) > div.abi-saved-contacts-row\_\_details > button\[type=”button”] > div > div > span</mark>

<mark style="background-color:yellow;">li:nth-child(</mark><mark style="color:red;background-color:yellow;">**2**</mark><mark style="background-color:yellow;">) > div.abi-saved-contacts-row\_\_details > button\[type=”button”] > div > div > span</mark>

As you can see, the number inside each CSS selector increments.

### When Building Custom Selectors

When building a custom selector for a list, there are two ways to address individual items.

#### Method one: Use `>> nth=number`

You can add `>> nth=0`, where `0` represents the first item in the list. You can change it to `nth=1`, `nth=2`, etc., depending on which item you want to address.

Note that you cannot check `>> nth=` with *document.querySelectorAll* because this method is specific to ZeroWork.

Let's start with a selector for the name on LinkedIn Sales Navigator.

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FZXEuYeq8E8JnRZ4yPA8g%2FScreenshot%202022-04-06%20at%2021.35.31.png?alt=media\&token=612865a6-e7fa-49f3-9923-47b117f71676)

A selector that works for this example is:

<mark style="background-color:yellow;">a\[data-anonymize='person-name']</mark>

If this selector matches multiple profiles on the page, that is expected because the same selector identifies every item in the list.

You can now use `>> nth=`:

<mark style="background-color:yellow;">a\[data-anonymize='person-name'] >> nth=0</mark>

`0` corresponds to the first item in the list. `>> nth=` is zero-based, meaning that `0` is the first item, `1` is the second item, and so on.

To address the second item:

<mark style="background-color:yellow;">a\[data-anonymize='person-name'] >> nth=1</mark>

If you want to address the whole list in a loop, use `{loop_index,1}`, which is specific to ZeroWork. You can learn more about it here: [Standard Loop](/using-zerowork/using-building-blocks/start-repeat/standard-loop.md#how-save-a-list-not-just-one-profile).

#### Method two: Use `:nth-child(number)`

Another option is to use `:nth-child(1)`, where `1` represents the first item. You can change it to `:nth-child(2)`, `:nth-child(3)`, etc., depending on which item you want to address.

The difference from the first method is that you need to identify which element in the hierarchy represents the list. This makes this method slightly more advanced, but also gives you more control.

Let's continue with the same example:

<mark style="background-color:yellow;">a\[data-anonymize='person-name']</mark>

Your next step is to inspect the hierarchy and identify which element represents each item in the list. In this example, the `li` element represents each profile card.

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2F7tVNTlvaCCYwii8kaytG%2FScreenshot%202022-04-06%20at%2021.34.09.png?alt=media\&token=73257230-c1a2-4b94-ad48-82ae6b6a74b4)

Since the selector for the name is inside that element, place it after `li` to reflect the hierarchy:

<mark style="background-color:yellow;">li:nth-child(1) a\[data-anonymize='person-name']</mark>

`1` corresponds to the first item in the list. Unlike `>> nth=`, `:nth-child()` is not zero-based: `1` is the first item, `2` is the second item, and so on.

To address the second item:

<mark style="background-color:yellow;">li:nth-child(2) a\[data-anonymize='person-name']</mark>

To address the whole list, you can again use `{loop_index,1}`, as explained here: [Standard Loop](/using-zerowork/using-building-blocks/start-repeat/standard-loop.md#how-save-a-list-not-just-one-profile).

### Video Tutorial: Define Selectors for Lists

{% embed url="<https://youtu.be/xTplANedrAk>" %}

### Example: Identify a Selector for a List of Questions on Quora

{% embed url="<https://youtu.be/sm6mOtEGyd8>" %}

### Example: Save a List of Pages from Facebook

{% embed url="<https://youtu.be/1TCl8kE3KdE>" %}
