How to use custom css selectors

The Single Selector and Multi Selector tools can be used to select elements on a webpage that you would like to automate. They offer the ability to use custom CSS selectors to refine your selection.

See Additional resources for more information about CSS selectors and their usage.

# Adding custom CSS selectors

Custom CSS selectors can be used in the "Single Selector" and "Multi Selector" tools.

Single Selector
  • Open the Selector Tool by clicking "Select" in an interact step.
  • Click on "Custom" and enter your selector in the text box.
single selector tool custom css selector axiom.ai
Multi Selector
  • Open the Selector Tool by clicking "Select" in an interact step.
  • In your data column of choice, click the arrow and select "Custom selector". Enter your selector into the textbox.
multi selector tool custom css selector axiom.ai insert css selector into the text field

To set the custom CSS selector from a variable, click "Set selector from data" and select the token containing the selector of choice. This can be used to loop through various targeted elements within the page.

pass data into custom selector

# Looping through custom selectors

Use the Loop through data step to loop through multiple custom selectors. Common use cases include:

  • Looping through multiple buttons on a page.
  • Clicking multiple checkboxes.
  • Clicking an item in a list, performing actions, then moving onto the next item in the list.
  • Advanced data scraping for inconsistent webpages.

To get started, set up your automation as normal:

  1. Read: Add a Read data from a Google Sheet step to read in your list of CSS selectors.
  2. Loop: Add a Loop through data step to loop through the list of CSS selectors that have been returned from the "Read data from a Google Sheet" step.
  3. Interact: Add your interact step inside the "Loop through data" step, the Click element step, for example. Follow the instructions in Adding custom CSS selectors to configure this step.
  4. Run: Run your automation and ensure that the selectors are working as expected.
Google Sheets setup multiple css selectors

Tip: Use the Edit a row in a Google Sheet step to add scrape data to the same rows as the custom selectors.

# Tips on selecting a selector

Selecting the correct selector is important to ensuring that you are selecting the correct element on the page. These selectors should be unique and specific to the elements that you wish to interact with. This can sometimes by simple, but some sites may make this intentionally difficult to prevent bot activity.

The information below is intended to introduce you on how to use custom CSS selectors with axiom.ai, for more detailed tutorials, please see Additional resources.

To view the underlying code of the site that you are looking to automate, right-click on the webpage and select "Inspect" from the context menu that appears.

# Class based selectors

Example code to extract a class based selector:

<h1 class="main-heading">Interest rates cut for first time in over four years</h1>

To use this class within axiom.ai:

.main-heading

# ID based selectors

Example code to extract an ID based selector:

<h1 id="main-heading" >Interest rates cut for first time in over four years</h1>

To use this ID within axiom.ai:

#main-heading

# Attribute based selectors

Example code to extract an attribute based selector:

<input aria-activedescendant="" aria-controls="suggestions" aria-expanded="false" aria-haspopup="listbox"  id="searchInput" 
placeholder="Search the BBC" role="combobox">

To use this attribute based selector within axiom.ai:

[aria-controls="suggestions"] or [placeholder="Search the BBC"]

# Grouped selectors

A single selector may not be unique, so group selectors to make them unique. Grouped selectors are made up of two or more selectors. Try different combinations.

Group by class and element based selectors:

header .consent-banner-text a

Group by attribute and element based selectors:

input[aria-controls="suggestions"]

Group by ID and element based selectors:

#main-heading a

# Advanced selectors

There may be instances where you need advanced selectors to be more specific, for example:

The :not selector can be used to exclude an element. For example, if you want to exclude an item from a list based that contains a link:

p.list-item:not(.list-item.link)

The :has selector allows you to target specific attributes of an element. For example, to target an anchor element that has "checkout-" in it's link.

a:has[href*="checkout-"]

# Additional resources

Prev: How to use the Selector Tool