How to Find Web Elements Using CSS Selectors

We are going to learn how to find Web Elements using CSS Selectors in this post.

If you have been using Xpaths so far to find and locate Web Elements, it is time to explore other options as well. The main reason being, CSS selectors are extremely simple to use. They are also pretty famous owing to their speed and performance.

CSS is one of those popular ways that people often resort to when they are trying to locate a Web Element on a web page and they don’t want to be bothered by the minutiae of Xpaths.

Without further ado, let’s get straight down to business.

How to Find Web Elements Using CSS Selectors

We are going to start off with some syntaxes followed by some examples. I will make use of my website Dumb IT Dude in order to explore how CSS selectors work.

General Syntax

The general syntax to use a CSS selector is:

tagName[attributeName=attributeValue]

Taking the above-mentioned syntax into account let’s try to locate Chapter 2 title in the left sidebar of my website as shown in the image below:

Steps to Find the Web Element using Basic CSS Selector Syntax

Here is a step by step procedure on how to find the Web Element using CSS Selectors.

Step 1: First step is to press F12 to open Developer Tools. You can also directly right-click the web element and click on Inspect. The third alternative is to press Ctrl + Shift + I if you are using Google Chrome browser.

Step 2: Click on Inspect Element button located at the left side corner of the developer tools as shown in the screen. Or you can press Ctrl + Shift + C.

Step 3: Click on “Chapter 2 – Java Demo Program” link shown on the site. You can choose to select any other element really. This one is just for the sake of explanation.

As you can see our selection has automatically flared the following in the developer tools section:

<a href = "http://dumbitdude.com/first-java-demo-program/"  title="Chapter 2">  Chapter 2 - Java Demo Program </a>

As per the syntax above, we need to select the tag name first. Our tag name here is <a>.

So we are going to type that first in the Find by string, selector, or XPath section below. Then according to the syntax, we will type the attribute name. The title one is smaller, so we are gonna take that. Then we will follow it by its attribute value which is “Chapter 2” in double inverted commas.

Confused? Here’s how:

Step 4: Type the following based on the syntax that was mentioned earlier:

a[title="Chapter 2"]

The moment you type it, the control will automatically show it as selected.

Isn’t that charming?

When you have the ID Attribute

In case you have an id attribute available, you can make use of the following syntax:

tagName#idattributeValue

Let’s see an example to understand it better.

In my website in the left sidebar there is a search box as shown in the image below:

The Web Element depicting that has an id element in it which goes something like this:

<div id="search-3" class="widget widget_search" >

You can follow Steps 1 to 3 in order to identify the locator.

The tag name we have is div. The id we have is “search-3“.

Then as per the syntax type, we have to write the following:

div#search-3

Just lose the double inverted commas here.

When you have the Class Attribute

In a similar fashion, what if you have a class attribute in your web element?

Here’s a quick way to find out the CSS Selector for that.

The syntax to remember here is:

tagName.classAttributeValue

Notice how there is . here instead of #

Let’s see an example now. The center section of my website home page is where all the content is. Here is an image of that:

Repeat Steps 1 to 3 in order to identify the locator.

The Web Element locator for that is:

<section class="content">

Now if we were to use the above-mentioned syntax, our tag name would be section. While our class attribute value would be “content”.

As per the syntax, type the following in the search box:

section.content

Just lose the double inverted commas.

That’s it!

Class Attribute Values with Space

You can separate class attribute names that have space between them using a . sign.

For e.g. the navigation bar of my website has the locator as:

<nav class="nav-container group desktop-menu " id="nav-header" data-menu-id="header-2" >

As you can see the class attribute value for the above is:

nav-container group desktop-menu

Now the class attribute has two spaces between them. You can use the following syntax to address this:

tagName.classAttributeValue1.classAttributeValue2.classAttriuteValue3

So as per the locator, we have the tag name as nav.

• The class attribute value 1 as nav-container
• The class attribute value 2 as group
• The class attribute value 3 as desktop-menu

In order to refer to that navigation bar, you can write the following:

nav.nav-container.group.desktop-menu 

So if you have n number of attribute values, just keep using the ‘.’ sign to separate them. You will be alright!

Locating Web Elements with Sub-strings using CSS Selectors

When attributes are dynamically generated you end up having huge names as their values. In such cases, it is always a good idea to use sub-strings.

Using Starting Text

In order to locate web elements using CSS and sub-strings using the starting text of attribute value, use the following syntax:

tagName[attributeName^=”starting text of attribute Value“]

Just replace the “starting text of attribute Value” with well, what it says.

Let us see an example to understand it better:

There is a text called “Blog” on my website that has a tag name of span.

If you inspect it this is the web element identification that we get:

<span class=”hu-blog-subheading”>Blog</span>

As you can see from the image below we have the attribute name as class

The attribute value is hu-blog-subheading.

The starting text of attribute value can be just “hu“.

Let’s try writing it now:

span[class^=hu]

That should do it.

Using Ending Text

What if you were planning to look for the web element using the ending text? You can do that using the following syntax:

tagName[attributeName$=”Ending Text of Attribute Value“]

where just replace the “Ending Text of Attribute Value” with well, you guessed right, what it says.

Let’s see this in the same example. Just replace the ^ sign with $ and use the last name of the attribute value which was “subheading“

span[class$=subheading]

That’s it!

Using Text Contained

This brings us to the obvious question. What if you wish to locate web elements using text contained in between?

Here is the syntax for that:

tagName[attributeName*=”Text Contained in Attribute Value“

You just have to replace the $ sign with * now. Then use the text sandwiched in between to refer to the element.

Let’s see that in the same example. We will use the blog word that was sandwiched between “hu-blog-subheading”

span[class*=blog]

How’s that?

If you like our tutorial of how to find Web Elements using CSS Selectors, please tell us in the comments section below.