How to fix CSS selector errors
  • 20 Jun 2022
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

How to fix CSS selector errors

  • Dark
    Light

On this page, you will learn how to fix the "Element not found" error caused by an incorrect CSS selector.
We assume that you already know how to:

  • Read/write CSS and HTML
  • Inspect HTML elements using Chrome DevTools

(To learn these first, please see the related articles section)

Common causes and solutions

To start troubleshooting, let's check the current CSS selector.

Navigate to the failed step and click to see the CSS selector.

check-css-selector

Let's take a look at the common causes and their solutions.

1. Auto-generated CSS selector

Cause

If your CSS selector looks very long, like the below example, it implies the CSS selector was auto-generated by DevTools.

#header-navigation > div > nav > div > div.d-none.d-lg-block.flex-grow-1.h-100 > div > div > div:nth-child(3) > a

While it may be quick and easy to get a CSS selector from DevTools, it tends to be fragile if the website's structure is updated frequently.

Solution

Find an id or a combination of classes that is unique to the element.

For example:

a#link_to_login_page

or

header a.navigation.login

If no ids or classes are available, you can specify other attributes using the attribute selector like this:

a[href="./login"]

or

a img[alt="login button"]

This way, you can get a selector that's immune to updates.

2. Random ids or classnames

If your CSS selector has a random string like the below example, it implies that the ids or classnames were generated by some build tool.

a.login_ac2187y3

The random part (prefix, suffix, or entire classname/id) might change after the build.

Again, you can solve this by using the attribute selector.

a[href="./login"]

Also, if it has a consistent part (login, in the above example), you can specify it using the wildcard syntax.

This matches the classname that contains the string "login":

a[class*="login"]

This matches the classname that start with "login":

a[class^="login"]

To learn more about attribute selectors, see MDN Web Docs - Attribute selectors.

Tips

How to confirm the "uniqueness" of your CSS selector

Follow the steps below to confirm that your selector matches only one element on the page:

  1. Open the DevTools window.
  2. Navigate to the Elements tab.
  3. Press Ctrl + F (Windows) or Cmd + F (Mac) to open the search text box.
  4. Input your CSS selector to the textbox.
  5. Confirm the number of the elements found by the selector.

uniqueness

If you are still having trouble...

Contact our Customer Success team anytime. We will help you solve this issue. 🙂


First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.