CSS Selector
What is a CSS selector?
To use features like auto-click, auto-login, and pagination templates, you need a Selector value that specifies the element to click. This help guide explains how to get that Selector value.
A CSS Selector (selector) is the element to which style properties are appliedIt refers to elements. In short, a website is made up of many tags, and to apply design on top of the code, specific values are assigned to the elements on the web page. When LISTLY's help mentions a CSS Selector, the code value that a specific selectable element (e.g., button, input field) has can be understood as such.
How to use
A1. Getting the selector value
Get CSS selector value with PARTS
Using LISTLY PARTS, you can obtain CSS Selector values quickly and easily.
LISTLY icon Click → [Part+] Select → Click the desired element
Through the above process, you can immediately check the Selector value of the desired element in the side panel. In the CSS Selector (selector) field, [Copy icon]clicking it allows you to easily copy that value.
After copying the value, paste it into the setting field that requires the Selector value using Ctrl+V on your keyboard.
Get CSS selector value using Developer Tools (Legacy)
(1) Right-click on the element such as a button or input field [Inspect]and select it.
(2) A code pane appears on the right or bottom of the screen. The code corresponding to the element you just selected is highlighted in gray, and when you hover over the code, the corresponding area on the page is highlighted in color.
(3) Right-click on the gray highlighted code, choose Copy -> Copy selector, and the selector value will be copied.
(4) Go to the settings window, place the cursor where the selector value should be entered, press Ctrl+V or right-click and select 'Paste' to insert the copied value, then save.
A2. If the selector you entered does not work correctly
In most websites, entering the selector value obtained in step 1 works correctly. However, if entering the selector value does not produce the desired result, check the following methods.
Interference from design modification programs
Problem : Unnecessary CSS code may have been copied along due to mouse cursor designs, browser theme changes, or extensions for design adjustments, . Because CSS is code that affects a web page's design, if related programs are running, turn them off and try copying the selector value again.If related programs are running, turn them off and try copying the selector value again.
When required information is included in a parent/adjacent tag
Problem : The main information may be contained in a parent tag (ancestor element) rather than the initially selected element.
Solution-1 (when using Parts) : From the initially selected element, click the up arrow (↑)to adjust the selection area. the largest box that does not exceed the button areaExpand up to that box and use that value.
Solution-2 (when using Developer Tools) : In Developer Tools, when you hover over code, the corresponding element area is highlighted. In this case as well, select the largest box that does not exceed the button areaand copy the CSS Selector value.
Last updated
Was this helpful?