Selector Number Parameter

Let's write a CSS selector that accepts a number dynamically. Use the %d parameter to access run-time information. This parameter is specific to UTAM.

We have a list of soup ingredients. We can use the %d parameter to access list elements by index.

In the JSON panel, look at the liByIndex element on line 11. Its selector uses the %d variable.

"css": "li:nth-child(%d)"

The args property declares the parameter's name and type. For %d, type must be number.

Look at the complied types. The UTAM compiler generated the getLiByIndex(index: number) method.

The test code can call the generated method to select any item from the list.

Click Run Test.

Tip: The List by Index tutorial is a more complex use case, which uses a table.