We have seen that with the help of Xpath how we locate an element on a webpage in the previous post How to Find Xpath in Selenium C#, there is one more way the help of that we can locate an element on a webpage that is CSS. So let’s start this.

Locating elements on the webpage using CSS

CSS stands for Cascading Style Sheet. There is some certain syntax that we need to keep in mind for using CSS. 

Locating Direct Child in CSS:

for example, if we want to locate the search Text box then the first click on that Text box right-click on it and select the option to inspect element then it will highlight the tag which is used for writing this particular element it is showing it is inside the <form> tag so in the console if we want to validate the Xpath.

We write the $ sign followed by x after it in the bracket inside the double codes (” “) we have to supply the Xpath of the element. when we press enter if our Xpath is valid we will get one entry and when we put the mouse pointer over it,  it will highlight the corresponding web element.

Syntax:

Xpath: //parent tag/child tag
CSS: parent tag>child tag

For Example:

When we want to find all input tags that are an immediate or direct child of form tag so we will write the Xpath like this.

$x("//form/input")

Similarly, if we want to find it by the CSS we will write it starting with the $$ sign and inside the double codes in the bracket, the parent tag followed by greater than sign > with immediate child tag.

$$("form>input")

Here for the direct child in CSS, the single backslash / is converted into the greater than > sign and there is no use of double backslash //

Locating Sub Child in CSS:

For finding the sub child either they are direct or sub child of another tag.

Syntax:

Xpath: //parent-tag//sub-child
CSS: parent-tag sub-child

the syntax  //form//input is used to locate all the input tags under the form tag it doesn’t matter all the input tags are direct children or a sub child of the form tag anywhere in the webpage.

For example-

Xpath: //form//input 
CSS: form input

CSS for this corresponding Xpath will be $$(“form input”) here the double backslash // convert into the space.

Locating Tags with Attribute in CSS:

While dealing with the attributes we write the nodes attribute with @ sign.

Syntax:

Xpath: //node[@<attribute>='value'] 
CSS: //node[<attribute>='value']

For example-

if one button Xpath is $x(“//input[@id=’find_top’]”) so its corresponding CSS will be $$(“input[id=’find_top’]”) it means in CSS we don’t have to use the @ symbol while writing it.

Shorthand Notations of Using Attributes in CSS

There are some shorthand notations provided by CSS for id and class attributes it means we don’t need to write every time the id and class in CSS.

Id:

instead of writing id in CSS we can represent it with # sign.this # sign will only applicable for representing value of id not anything else.

Syntax:

Xpath: //div[@id='abc']
CSS: div#abc

For example-

So when we write the Xpath of any Button that is

$x("//input[@id='find_top']")

So it’s CSS can also be written like

$$("input#find_top")
       Or 
$$("#find_top")

Class:

instead of writing class in CSS we can represent it with . (Dot) Sign

Syntax:

Xpath: //div[@class='abc'] 
CSS: div.abc

For example-

If any Button Xpath is

$x("//input[@class='btn']")

So it’s CSS can also be written like

$$("input.btn")
     Or
$$(".btn")

And operator between the multiple attributes

If we want to select the quick search button and it’s Xpath is

$x("//input[@id='find' and @type='submit']")

So the CSS for this will be

$$("input[id='find][type='submit']")

so these are some examples from that you can locate the elements on a webpage using CSS.