- What is BluePrism? Know about the benefits of BluePrism Certification
- What is Silk test Workbench? : Comprehensive Guide
- RPA Developer Salary
- What is Selenium and Why Should You Learn Selenium | Everything You Need to Know
- Robotic Process Automation with Blue Prism | A Definitive Guide with Best Practices [ OverView ]
- An Overview of Patch Workflows | Benefits and Special Features [ For Freshers and Experience ]
- Selenium Commands : Selenese | Everything You Need to Know [ OverView ]
- Robotic Process Automation Developer Salary [ For Freshers and Experience ]
- List of Basic Powershell Commands | Every Developer Should Know [ OverView ]
- Tosca vs Selenium | Differences and Which Should You Learn?
- Chef vs Puppet: Major Differences and Similarities
- what is TestNG Annotations in Selenium Webdriver?
- Blue Prism Certification Guide
- RPA Tools Comparison
- Ansible vs Chef
- How to Download & Install Selenium Ide?
- RPA vs Selenium
- RPA Blue Prism Certification Guide
- Robotic Process Automation Career Scope
- How to Take A Screenshot in Selenium WebDriver?
- Robot Class in Selenium Webdriver
- CSS Selectors in Selenium
- Vector Class in Java
- Page Object Model in Selenium With Page Factory
- How to Handle Alert and Pop-ups in Selenium WebDriver?
- Selenium Webdriver
- What is Selenium?
- How to Handle Actions Class in Selenium WebDriver?
- Waits in Selenium WebDriver
- Select Class in Selenium WebDriver
- What is BluePrism? Know about the benefits of BluePrism Certification
- What is Silk test Workbench? : Comprehensive Guide
- RPA Developer Salary
- What is Selenium and Why Should You Learn Selenium | Everything You Need to Know
- Robotic Process Automation with Blue Prism | A Definitive Guide with Best Practices [ OverView ]
- An Overview of Patch Workflows | Benefits and Special Features [ For Freshers and Experience ]
- Selenium Commands : Selenese | Everything You Need to Know [ OverView ]
- Robotic Process Automation Developer Salary [ For Freshers and Experience ]
- List of Basic Powershell Commands | Every Developer Should Know [ OverView ]
- Tosca vs Selenium | Differences and Which Should You Learn?
- Chef vs Puppet: Major Differences and Similarities
- what is TestNG Annotations in Selenium Webdriver?
- Blue Prism Certification Guide
- RPA Tools Comparison
- Ansible vs Chef
- How to Download & Install Selenium Ide?
- RPA vs Selenium
- RPA Blue Prism Certification Guide
- Robotic Process Automation Career Scope
- How to Take A Screenshot in Selenium WebDriver?
- Robot Class in Selenium Webdriver
- CSS Selectors in Selenium
- Vector Class in Java
- Page Object Model in Selenium With Page Factory
- How to Handle Alert and Pop-ups in Selenium WebDriver?
- Selenium Webdriver
- What is Selenium?
- How to Handle Actions Class in Selenium WebDriver?
- Waits in Selenium WebDriver
- Select Class in Selenium WebDriver

CSS Selectors in Selenium
Last updated on 21st Sep 2020, Artciles, Automation, Blog
CSS Selectors in Selenium are used to identify a user desired HTML web element. This fits into an element locator strategy of automated test development where the primary aim is to interact with page elements through different types of locators. There are several other methods to identify element locators such as id, name, class name, link text, partial link text, XPath, tag name etc. other than CSS selectors in Selenium we prefer the CSS way due to the benefits below.
Why Choose CSS Selectors in Selenium Over Other Element Identifiers?
- Faster Identification and reduced test execution time
- Availability of better documentation.
- Enhanced readability.
Subscribe For Free Demo
Error: Contact form not found.
CSS Selectors
Below are the syntax and examples on how to locate the desired elements and use them in selenium scripts.
1.Using Id
CSS Selector Rule : #id
Example
For the Sample HTML below-
- <button id=”submitButton1″ type=”button” class=”btn”>Submit</button>
CSS Locator : #submitButton1
Description : #submitButton1’ will select the element with id ‘submitButton1’.
2.Using class
CSS Selector Rule : .class
Example
For the Sample HTML below-
- <button id=”submitButton1″ type=”button” class=”btn”>Submit</button>
CSS Locator : .btn
Description : ‘.btn’ will select all the elements with class ‘btn’.
3.Using tag
CSS Selector Rule : tagName
Example
For the Sample HTML below-
- <input id=”fname” type=”text” name=”firstName” class=”textbox”>
CSS Locator : input
Description : ‘input’ will select all the input type elements.
4.Using attributes and their value
CSS Selector Rule : [attributeName=’attributeValue’]
Example
For the Sample HTML below
- <input id=”fname” type=”text” name=”firstName” class=”textbox”>
CSS Locator : [name=’firstName’]
Description : [name=’firstName’] will select the elements with name attribute having value ‘firstName’.
Now, using these basic rules of locating web elements, we can use them in conjunction to create more robust locators, selecting unique elements.
1.Using tags and id
CSS Selector Rule : tag#id
Example
For the Sample HTML below
- <input id=”fname” type=”text” name=”firstName” class=”textbox”>
CSS Locator : input#fname
Description : input#fname will select the ‘input’ element with id ‘fname’.
2.Using tags and class
CSS Selector Rule : tag.class
Example
For the Sample HTML below
- <input id=”fname” type=”text” name=”firstName” class=”textbox”>
CSS Locator : input.textbox
Description : input.textbox will select the ‘input’ element with id ‘textbox’.
3.Using tags and attributes
CSS Selector Rule – tag[attributeName=’attributeValue’]
Example
For the Sample HTML below
- <input id=”fname” type=”text” name=”firstName” class=”textbox”>
CSS Locator : input[name=’firstName’]
Description : input[name=’firstName’] will select the ‘input’ element with ‘name’ attribute having value ‘firstName’.
Locating Child Elements (direct child only)
CSS Selector Rule : parentLocator>childLocator
Example
For the Sample HTML below
- <div id=”buttonDiv” class=”small”><button id=”submitButton1″ type=”button” class=”btn”>Submit</button></div>
CSS Locator :div#buttonDiv>button
Description : ‘div#buttonDiv>button’ will first go to the div element with id ‘buttonDiv’ and then select its child element – ‘button’.
Locating elements inside other elements (child or sub child)
CSS Selector Rule : locator1 locator2
Example
For the Sample HTML below
- <div id=”buttonDiv” class=”small”>
- <button id=”submitButton1″ type=”button” class=”btn”>Submit</button>
- </div>
CSS Locator : div#buttonDiv button
Description :‘div#buttonDiv button’ will first go to the div element with id ‘buttonDiv’ and then select ‘button’ element inside it (which may be its child or sub child).
nth child
CSS Selector Rule : nth-child(n)
Example
For the Sample HTML below
- <ul id=”testingTypes”>
- <li>Automation Testing</li>
- <li>Performance Testing</li>
- <li>Manual Testing</li>
- </ul>
CSS Locator : #testingTypes li:nth-child(2)
Description : ‘#testingTypes li:nth-child(2)’ will select the element with id ‘testingType’ and then locate the 2nd child of type li i.e. ‘Performance Testing’ list item.
Locating Siblings
CSS Selector Rule : locator1+locator2
Example
For the Sample HTML below-
- <ul id=”testingTypes”>
- <li id=”automation”>Automation Testing</li>
- <li>Performance Testing</li>
- <li>Manual Testing</li>
- </ul>
CSS Locator : li#automation + li
Description : ‘li#automation + li’ will first go to li element with id ‘automation’ and then select its adjacent li i.e. ‘Performance Testing’ list item.
For handling dynamic elements having ids and other locators dynamically generated(not known beforehand). We can make use of the above locators by using different parent-sibling relationships of the dynamic elements.
we can also use some special CSS selectors using which we can match partial values of the attributes.
1.^ – Starts with
CSS Selector Rule : [attribute^=attributeValue]
Example
For the Sample HTML below
- <button id=”user1_btn_263″ type=”button” class=”btn”>Submit</button>
CSS Locator : id^=”user1″
Description : ‘id^=”user1″‘ will select the element whose id starts with “user1” value
2.$ – Ends with
CSS Selector Rule : [attribute$=attributeValue]
Example
For the Sample HTML below
- <button id=”user1_btn_263″ type=”button” class=”btn”>Submit</button>
CSS Locator : id$=”btn_263″
Description : ‘id$=”btn_263″‘ will select the element whose id ends with “btn_263” value
3. *– Contains
CSS Selector Rule : [attribute*=attributeValue]
Example
For the Sample HTML below
- <button id=”user1_btn_263″ type=”button” class=”btn”>Submit</button>
CSS Locator : id*=”btn”
Description : ‘id*=”btn”‘ will select the element whose id contains with “btn” value