Before we start with the guide on how to write css selectors, let’s bring more information what are they and for what are used.

What are the css selectors

The selectors are used by all the modern technologies for making web-based, desktop or mobile applications. With them you can select the HTML elements you want to work with. Mostly the css selectors are used when you write css and want to style your application. However, they are needed for automation tests as well. These days, we have different technologies that we use to write automated tests, but the most common one is Selenium. This article is about this specific type of selectors and how to use them as element locators.

Type of css selectors

We have provided a list of css selector types based on the property of the html element:

  • Basic selectors – id, class, etc
  • Attribute selectors – using specific attribute of the element
  • Substring selectors – using part of the attributes
  • Nested selectors – using a hierarchical structure
  • State selectors – based on a certain state like “hover”, “active”, etc.

Basic css selectors

Here is a detailed observation of some basic selectors with examples. Check out the following html code on our site:

<input type="text" id="email" class="form-input-email" name="email" placeholder="Email">

We can select this element with the basic selectors below:

  • #email – Finds the element with id = “email”
  • .form-input-email – Finds the elements with class = “form-input-email”
  • To be more specific, we can use the tag name – input#email, input.form-input-email. This will find the input element with that id / class.

Attribute selectors

Next, we are going to use the html code from the basic example above.

It is possible to select this element with the attribute selectors like:

  • [name="email"] – finds elements with attribute name = “email”
  • [placeholder="Email"] – finds elements with attribute placeholder = “Email”
  • To avoid mismatches, there is an option to be more specific – input[name="email"]. Thus, the selector will find all the input elements with that attribute.

Substring selectors

The selector in question uses only a part of the attribute value. We will work with the examples above.

  • First, input[name^="em"] selects every <input> element with name attribute value which begins with “em”
  • Next, input[name$="em"] selects every <input> element with name attribute value which ends with “em”
  • The third possibility is input[name*="em"] which selects every <input> element with name attribute value which contains “em”

Furthermore, these types of selectors are usable when your attributes are dynamic but have some indicators which are always the same, like name=”email_32fds48547″.

Nested selectors

Here is an example of an html element that has hierarchical structure. Let’s select the icon in the second dropdown element.

<div class="dropdown-menu">
  <a class="dropdown-item>
    <i data-icon>
    </i>
  </a>
  <a class="dropdown-item>
    <i data-icon>
    </i> 
  </a> 
  <a class="dropdown-item>
    <i data-icon>
    </i> 
  </a> 
</div>

The nested selector is the following: .dropdown-menu .dropdown-item:nth-child(2) i. Let’s examine the selector in details:

  • .dropdown-menu locates the whole block with that class
  • .dropdown-menu .dropdown-item selects all elements that contain class “dropdown-item” and are inside “dropdown-menu”. This selector has an alternative .dropdown-menu > .dropdown-item. The difference between empty space and “>” is that the “>” finds elements with class “dropdown-item” which are direct children of the parent element “dropdown-menu”, while the ” ” (empty space) between the selectors finds elements which are not direct but still children of the “dropdown-menu”.
  • nth-child(2) locates the second element in the list
  • “i” is the tag name

State selectors

There are many state selectors like “enabled”, “active”, “hover”, nth-child (like the nested example above), disabled, etc. You can use them in the same way with the same syntax while adding the state with “:” attached to the selector as “selector:state”. If we want to locate all disabled inputs the selector is input:disabled.

An important feature of the state selectors is the potential to add negation “:not”. For instance, here is how to find all inputs which are NOT enabled but checked – input:not(:enabled):checked

Simple way to test css selectors

The simplest way to test css selectors is through the browser inspector. Open your site, navigate to the page you want to test and open the browser inspector. Once the inspector is opened, press the buttons CTRL + F and a search box will appear. Type your css selector there and press Enter, if the selector is correct and there is such an element on the page, the browser will auto select it.

How to write css selectors

A simple way to generate css selectors

  • Inspect the element in mind with your browser
  • Right click on the html tag
  • Copy -> copy selector

Result – rev_slider_2_1 > rs-slides > rs-slider

How to write css selectors

In Conclusion

These are the most frequently used css selectors to locate html element on your site. Bare in mind that creating a css selector takes a lot of effort and practice so you should use them frequently. We at Snapics prefer the use of css selectors over xpath because of its simplified syntax and easy use.

Find how to use css selectors when creating a test in Snapics.

For guidance and additional information on how to write css selectors on w3schools