Selenium Tips- CSS Selector

April 9, 2024
5 min read
Share this post

In this blog post we'll be discussing some useful Selenium tips for CSS Selector and a pseudo - class that will help to convert your XPATH locators to CSS.

You must be wondering what CSS Selector exactly is ? Well in this blog post we will not indulge into the deep details about CSS Selector but for the time being let’s discuss the basic definition of a CSS Selector. CSS Selector is a combination of element selector and a value that acts as a unique identifier of the web element within a web page.
They are basically the string representations of HTML tags, attributes, values and class or we can say they are one of the several technologies that can be used to select nodes in an XML Document. They are the patterns that are matched against elements in a tree.

We have divided the tips into 2 categories:

  1. Simple
  2. Advanced

Let’s begin discussing these in detail.

  1. Simple
    a. Direct Child: A dirct child is defined in XPATH with the help of “/” and on the other hand CSS uses “>” to define a direct child,
  2. Example:
  3. XPath: //div/a
  4. CSS: div > a

b. Child or sub child: If the element can be inside another or one of it’s child, then it is defined in XPath using a “//” and CSS uses a whitespace to define a child or a sub child.

  • Example:
  • XPath: //div//a
  • CSS: div a

c. Id: Element’s id is defined in XPath using “[@id=’exampleid’] and in CSS it is defined using “#”.

  • Example:
  • XPath: //div[@id=’exampleid’]
  • CSS: #exampleid

d. Class: Just like id, class are also defined using similar syntax in XPath- [@class=’exampeclass’] and in CSS class is defined using a “.”

  • Example:
  • XPath: //div[@class=’exampleclass’]
  • CSS: .exampleclass
  1. Advanced

a. Next Sibling: This is one of the most useful features to navigate the elements like forms or ul items. The job of the next sibling is to tell Selenium to find the next adjacent element on the page that is inside the same parent.


<form class = "form-login" role = "form" action = "/main.php"

method = "post">

<h3 class = "form-heading"></h3>

<input type = "text" class = "form-control" id = "useremailid"

name= "useremailid" placeholder = "useremailid" required autofocus>

<input type = "password" class = "form-control" id = "userpassword" name ="userpassword" placeholder = "userpassword" required>


<button class = "btn btn-lg btn-primary" type = "submit" name = "login">Login</button>



Now let’s write an XPath and CSS Selector to choose element after emailid.

XPath: //input[@id='emailid']/following-sibling::input[1]

CSS: #emailid + input b. Attribute Values: If you don't bother about ordering of child elements then you can use attribute selector to choose elements based on any attribute value. We will use the form in the above example for this example also.

We will show how to choose the username element of the form above without adding the class.


XPath: //input[@name=’username’]

CSS: input[name=’username’]

We can also chain filters to be more specific in selecting


XPath://input[@name=’login’ and @type=’submit’]

CSS: input[name=’login’][type=’submit’]

Here selenium will find the element input field with the name=’login’ and type =’submit’.

c. Choosing a specific match: CSS in Selenium helps us to navigate lists with more precision.If you have an ordered list (ul) and you want to find the fourth element of the list i.e. the li element without regard of any other element, we should use nth-of-type or nth-child.


  • C++
  • Java
  • Python
  • C#

If you want to select the fourth li element in this list i.e. C# in this case then we will follow this syntax:

CSS: #languagerecordlist li:nth-of-type(4)

If we want to select the fourth element only if it is a li element i.e. Python in this case then we will use the following syntax:

CSS: #languagerecordlist li:nth-child(4)

If you don’t specify the child type for the nth-child then it will allow you to select the fourth child without regard of the type.

CSS: #languagerecordlist *:nth-child(4)

d. Substring matches: CSS in Selenium has an interesting feature to match partial strings. Partial string matching is done using 3 three syntaxes:^=,$=,*=. Let’s discuss these three in detail with an example.

i. ^=: This syntax is used to match a prefix


CSS: x[id^=’id_prefixtext’] - This example shows how to

match a link with an “id” that starts with the text


ii. $=:This is used to match a suffix


CSS: x[id$=’id_suffixtext’] - This example shows how to

match a link with an “id” that ends with the text “id_suffixtext”

iii. *=: This is used to match a substring


CSS: x[id*=’id_patterntomatch’] - This example shows how

to match a link with an “id” that contains the text


e. Matching by inner text: one of the most useful pseudo classes :contains() matches elements with the desired text block


CSS: a:contains(‘LogOut’)

Rupesh Garg
Rupesh Garg
CEO and Chief Architect
Our blog

Latest blog posts

Discover the latest in software testing: expert analysis, innovative strategies, and industry forecasts
Software Testing
Testing Tools

A Complete Guide to Troubleshooting Common Issues with JMeter

Rupesh Garg
Rupesh Garg
June 14, 2024
5 min read
Software Testing
Performance Testing

7 Top Software Testing Trends to Watch Out for in 2024

Rupesh Garg
Rupesh Garg
June 6, 2024
5 min read
Software Testing

Compelling reasons to outsource to a third party in 2024

Rupesh Garg
Rupesh Garg
May 31, 2024
5 min read