CSS Selector Guide

Current Version Support

This version supports manual CSS selector input. You need to provide CSS selectors for the search box, product names, and pagination elements on your target website.

How to Find CSS Selectors

1Open Developer Tools

Right-click on the element you want to target and select "Inspect" or press F12 to open Developer Tools.

2Locate the Element

In the Elements tab, the selected element will be highlighted. You can also hover over elements in the HTML to see them highlighted on the page.

3Copy the Selector

Right-click on the element in the Elements tab and select "Copy" → "Copy selector" to get the CSS selector.

Types of Selectors You Need

Search Box Selector Required

This should target the input field where users type search keywords.

Examples:
#search-input
input[name='q']
.search-box input
input[type='search']

Product Name Selector Required

This should target the elements containing product names/titles in search results.

Examples:
.product-title
h2.item-name
.product h3
span.product-name

Next Page/Load More Selector Required

This should target the button or link for pagination (next page, load more, etc.).

Examples:
.next-page
a[aria-label='Next']
.load-more-button
button:contains('Load More')

Common Selector Patterns

ID Selectors
#search-box
#product-title

Use when elements have unique IDs

Class Selectors
.search-input
.product-name

Use when elements share common classes

Attribute Selectors
input[name='q']
button[type='submit']

Use when elements have specific attributes

Combined Selectors
.product .title
#main .search input

Use for more specific targeting

Testing Your Selectors

1Open Console

In Developer Tools, go to the Console tab.

2Test the Selector

Type document.querySelector('your-selector-here') and press Enter. If it returns an element, your selector is working.

document.querySelector('#search-input')
document.querySelector('.product-title')

3Test Multiple Elements

Use document.querySelectorAll('your-selector-here') to see all matching elements.

document.querySelectorAll('.product-title')
Important Notes
  • Selectors are case-sensitive
  • Make sure your selectors are specific enough to target the right elements
  • Test your selectors on the actual website you want to scrape
  • Some websites may have dynamic content that changes selectors
  • If a selector doesn't work, try using a more specific or different approach
Return to Form