Selenium CSS locator | Selenium CSS selector

CSS stands for Cascading Style Sheet. Selenium CSS selector/locator one of the locator in selenium using which we identify web elements on the web page. The standard syntax for CSS locator expression is:

tagName[attributeName='attributeValue']

OR

[attributeName='attributeValue']

Specifying tagName is optional. While specifying CSS locator in the target text box of Selenium IDE, always remember to prefix it with “css=”. If selenium identifies more than one matching element, then the first matching element will be located.

Limitation of CSS locator

1. It does not support text i.e. we can identify element using text of the element. 

2. It does not support backward traversing. 

3. It doesn’t support index 

Example of CSS locator

Following are the 4 different ways of writing cssSelector expression for below mentioned input tag

<input type=“text” id=“testID” class=“inputText” value= “firstName” >

1. input[type='text'] 

2. input[id='testID'] 

3. input[class='inputText'] 

4. input[value='firstName'] 

While deriving cssSelector expression, we can use either one attribute or multiple attributes till we found unique matching element on the web page.

e.g.: input[type=’text’][id=’testID’][class=’inputText’][value=’firstName’]

css locator can also be written using ID and Class. Here, ID is represented by “ # ” and className is represented by dot operator( . ). In both the cases using tagName is optional.

You can write the script and test these using our Test Page