Skip to main content

Finding a CSS Selector

Step-by-step instructions on finding selectors for HTML elements.

Updated over 2 weeks ago

In this Article

What is a selector?

A selector in the context of web pages is a mechanism used to locate and interact with elements on the page.

Selectors in DubBot

Selectors are used in the following Advanced Configurations for DubBot's Site Settings:

How to Find a CSS Selector

  1. Open the webpage with the content you want to select in a browser.

  2. Right-click in the field or element for which you want to find the selector.
    Note: these directions are for Google Chrome, other browsers are similar

  3. In the menu that appears, select Inspect.

  4. When you focus on the item in the regular page view that you want to select, the corresponding code is highlighted in the inspect window.

  5. Select the three dots, or right-click in the selected code area, and select Copy Selector from the menu that appears.

  6. Paste that information into the item's corresponding field in DubBot. The copied selector may look something like the following: div#popup > button.alert-close or .alert-close.

Note: the CSS selector provided using this Copy method may be more detailed than necessary. Selectors for closing out these content sections are highly specific to website implementation. Technical administrators with an understanding of HTML and CSS may be able to simplify the selector input by referencing just the ID or class of the Close element.

How to Use the Copy Selector Tool

The following example walks you through the steps given above to help explain the process of finding the Selector for an HTML element to use in the selector field in DubBot.

  1. Open DubBot's Newsletter Signup form in a browser.
    ​

    form with Name, Email, and Company Name fields

  2. Right-click in the field or element for which you want to find the selector.
    This example selects the Name field using Google Chrome on a PC, other browsers are similar.
    ​

    Form field has focus, showing menu that appears on right-click with Inspect option

  3. In the menu that appears, select Inspect. A window will appear to the bottom or left of your browser window, depending on your settings.

  4. When you focus on the item in the regular page view that you want to select, the corresponding code is highlighted in the inspect window.
    ​

    Name field in DubBot webpage has focus and corresponding HTML is shown in Elements area of Dev Tools

  5. Select the three dots, or right-click in the selected code area, and select Copy Selector from the menu that appears.
    ​

    Copy selector option shown below Copy option in Elements menu

  6. Paste that information into the item's corresponding field in DubBot. The copied selector may look something like the following: div#popup > button.alert-close or .alert-close. In the case of this example, you will find upon pasting the information, that #lastname has been pasted.
    ​

    Crawler Authentication area of DubBot's Advance Site Settings, highlighting the Username field selector field

Finding an ID selector from an Element's HTML

For the following source code:

<input class="form-control" id="username" name="t_user" type="text" value="" autofocus="" fdprocessedid="skrvc">

You should enter #username for the Username field selector.

Similarly, for the following source code:

<input class="form-control" id="password" name="t_pass" type="password" value="" fdprocessedid="22xrtz">

You would enter #password for the Password field selector.

For the button, with the following code:

<button class="btn btn-default btn-login" type="submit" name="_eventId_proceed" fdprocessedid="foxb9m">Login</button>

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?