Write Dynamic CSS Selector in Selenium using multiple ways

Selenium supports multiple locators which will help you to identify web element and perform the operation based on your requirements.We will discuss about CSS Selector in Selenium and you will feel the importance of the same.

Selenium supports 8 locators, please check below screenshot.




This is one of the most frequent asked questions in interview like how many selectors are present and which one is best and where to use which locator?

In terms of performance, CSS perform well as compared to XPATH and CSS will not change based on browsers, that is it will behave same in all browsers but xpath will behave differently in IE browser.

Recently I published an article on IE browser issues and raised the same point.


In this post we will discuss some basics CSS Selector in Selenium and usage of them.

Please find the below table which will give you brief introduction about different ways to write CSS in Selenium.

I have listed down only limited one but widely used in any application.


Symbol used while writing CSS selector in Selenium Webdriver


Css Selector Table



Please check the Youtube video for CSS 





Different ways to write CSS selector in Selenium to identify Dynamic elements


I will use WordPress application for demo purpose and will try to show all ways.

Before starting with CSS in Selenium make sure you have firebug installed and active.

If you are completely new to Selenium then download firebug and firepath and start your CSS exercise.





Now type only  “a” in the search bar and you will notice all links with be highlighted but we do not want all the link so we will add some filter condition to get unique match.



Get all elements


Now have a close look and check what each link is doing.



get all input tags


Last time just type input and you will get 6 matching nodes.

It means it is returning all elements which, comes under input tags.

Check W3School link if you are not familiar with input tag.

get login using attribute


Now you are confident with single tag. So now lets add some condition and check the result.




Find CSS Selector using Single Attribute




CSS Single attribute




Find CSS using Multiple attributes.







Find CSS using id and Class name


Class name generally will not be unique so always try class name with some other attributes.






Find CSS using contains

In CSS we will use * symbol to check particular attribute contains that value or not

In below example it will partially check if link title contains “Password lost ” if yes then it will match.

I have taken only link in this example but you can take any tag and any attribue.



One more example with id attribute





Find CSS using Start-with


In below example I have taken only link but you can take any element.


CSS Start-with method



Find CSS using ends-with



CSS Selector in Selenium


Now you must be having a clear picture in mind for CSS Selector in Selenium and I would recommend to try all technique at least once using same or some other applications.

Check this link from SauceLabs for CSS Selector

You can always use XPATH and CSS in your script depends on your requirement.

If you want to run your test script in all browser like Cross Browser testing then go with CSS because it will have same in all browsers.


Please drop your comment or your feedback below if any and if you find this article then please share with your friends as well.


You can like our Facebook Page for more updates Learn Automation Page
Join our facebook group for any query Selenium Group Discussion




  1. Shambo
  2. Shambo
  3. Shambo
  4. Shambo
  5. Veeresh
  6. anurag
  7. Nilesh
  8. sanjay