CSS Selectors for Selenium with example

This post is all about CSS selectors for selenium. CSS is faster and simpler than Xpath particularly in case of IE browser where Xpath works very slowly.

We can detect element in different ways as below

 

# Element by ID

Event is ID

css=#Event

# Element by Name

Query is name

css=input[name= Query]

# Element by Class

Example is class

css=.Example a

# Element by href

css=a[href=’URL’]

# Locating Child or subchild

Here a is child of div

css= div a

# Next sibling by + sign

Say Registration is ID and small is next sibling

#Registration + small

#Element name start with go

input[name^="go"]

#Element name end with go

input[name$="go"]

#Matching by inner text

Search is inner text

css=a:contains('Search')

 #Choosing specific element

• Automation Tools
• QTP
• Selenium

If we want to select the second li element (Selenium) in this list, we can use the nth-of-type, which will find the fourth li in the list.

css=ul#recordlist li:nth-of-type(2)