Css Selectors for Selenium WebDriver

CSS selectors are a great and fast way to locate elements in Selenium WebDriver. I have listed down some basic CSS Selectors for Selenium WebDriver which are commonly used. The goal of this tutorial is to explain as simply as possible about various types of usages of CSS Selectors using simple examples.

Css Selector Using ID Selector

Consider the below HTML

<input id="userid" type="text" value="userid" />
<button id="btnid">Submit button</button>

This HTML contains a text box with id = "userid" and a button with id = "btnid". If we want to select the text box using id css selector the syntax is
syntax = HTMLtagname # ID
Css Selector will be
input#userid      (it will select the text box)
button#btnid   (it will select the button)
The code in WebDriver will be

var TxtBoxElement = driver.FindElement(By.CssSelector("input#userid"));
var BtnElement = driver.FindElement(By.CssSelector("button#btnid"));

Css Selector Using Class Selector

Consider the below HTML

<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>

This HTML contains a text box with class = "txtuser" and a button with class = "btnclass". If we want to select the text box using class css selector the syntax is
syntax = HTMLtagname . ClassName
Css Selector will be
input.txtuser      (it will select text box)
button.btnclass   (it will select the button)
The code in WebDriver will be

var TxtBoxElement = driver.FindElement(By.CssSelector("input.txtuser"));
var BtnElement = driver.FindElement(By.CssSelector("button.btnclass"));

Css Selector Using Attributes Selector

Consider the below HTML

<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>

This HTML contains a text box , button and an anchor with various attributes.
You can select an element by using any attribute.
syntax = HTMLtagname [attribute=value]
Css Selector will be
input[id=userid]      (it will select the text box)
button[class=btnclass]   (it will select the button)
a[title="myLink"]  (it will select the anchor)
The code in WebDriver will be

var TxtBoxElement = driver.FindElement(By.CssSelector("input[id=userid]"));
var BtnElement = driver.FindElement(By.CssSelector("button[class=btnclass]"));
var AnchorElement = driver.FindElement(By.CssSelector("a[title=myLink]"));

Css Selector Using Pattern Matching

Consider the below HTML
<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=classbtn" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>

There are three ways you can match the pattern in any attribute.

1. Starts With (prefix)

In CSS Selector, Starts with is denoted by ^ symbol.
Example CSS Selector.
input[id^='user']   (this will select the text box in which id starts with 'user')
Code in WebDriver:

var TxtBoxElement = driver.FindElement(By.CssSelector("input[id^='user']"));

2. Ends With (suffix)

In CSS Selector, Ends with is denoted by $ symbol.
Example CSS Selector.
button[class$='btn']   (this will select the button in which class ends with 'btn')
Code in WebDriver:

var BtnElement = driver.FindElement(By.CssSelector("button[class$='btn']"));

3. Contains

In CSS Selector, Contains is denoted by * symbol.
Example CSS Selector.
a[href*='yahoo']   (this will select the anchor in which href attribute contains 'yahoo')
Code in WebDriver:

var AnchorElement = driver.FindElement(By.CssSelector("a[href*='yahoo'] "));

CSS Selector using Parent (indirect child)

Consider the following HTML
<div id="ParentDiv">
    <input class="txtclass" value="Text" type="text"/>   
    <button class="btnclass">Button</button>
    <a class="anchorclass" id="anchor" href="#"> My Link </a>

</div>

The above HTML contains our beloved text box, button and anchor again. But this time inside a parent element.
The syntax to select element using its parent is
syntax = AnyParentSelector space Anychildselector
example.
div#parentdiv input.txtclass
or
div#parentdiv a[id=anchor]
Code in WebDriver:

var ElementA = driver.FindElement(By.CssSelector("div#parentdiv input.txtclass]"));

var ElementB = driver.FindElement(By.CssSelector("div#parentdiv id=anchor]"));

CSS Selector using Parent (direct child)

Consider the following HTML
<div id="ParentDiv">
    <input class="txtclass" value="Text" type="text"/>   
    <button class="btnclass">Button</button>
    <a class="anchorclass" id="anchor" href="#"> My Link </a>

<div id="ChildDiv">
    <input class="txtclass" value="Text" type="text"/>   
    <button class="btnclass">Button</button>
    <a class="anchorclass" id="anchor" href="#"> My Link </a>
</div>
</div>


The above HTML now contains two divs. If we want to select a child element using indirect child method, it will return us more than one occurrence of child.
example
div#parentdiv input.txtclass   (This will return two text boxes with class "txtclass". As both these text boxes are the children of "parentDiv". One is the direct child and one is indirect child.
Now if we want to access the direct child, we should use ">" symbol instead of space.
example
div#parentdiv > input.txtclass  (this will return the first textbox which is the direct child of parentdiv
Code in WebDriver:

var ElementA = driver.FindElement(By.CssSelector("div#parentdiv > input.txtclass]"));

var ElementB = driver.FindElement(By.CssSelector("div#parentdiv  > id=anchor]")

Conclusion

By using above CSS Selectors, we can identify almost every type of complex web elements. I hope this tutorial helps many automation testers.
Please give your feedback in the comments section