Hi all, in this tutorial, I will describe you how to write effective CSS Selenium selectors a.k.a locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order:

  • First try to use Id, name, class, etc.
  • Then, try to interrogate by CSS
  • Then, use XPath to find elements.

CSS Selenium Selector Strategies

Reference Demo Site: http://www.seleniumeasy.com/test/basic-first-form-demo.html

Basic Syntax


1) Using Absolute Path

You should use > sign to reach an element directly.  (Note: For XPath we use / sign for this.)



2) Using Non-Absolute Path

You should use a white space between tags to locate the element. Use “.” for class and “#” for id.


Syntax: form .form-group #user-message

3) Using Tag Name

You can write the tag name directly like “form”, “div”, “img”,”body”, etc. As below figure, I wrote “form” tag to locate the form element.
(Note: For XPath we use //tagname for this.)


4) Using Tag & Attribute & Value Trio

You can use tag[attribute=’value’] syntax.
(Note: For XPath we use tag[@attribute=’value’] for this.)


Syntax: input[id=’user-message’]

5) Using Containing Text of an Attribute

You can use tag[attribute*=’containing text’] syntax.
(Note: For XPath we use tag[contains((@attribute,’containing text’)] for this.)


Syntax: input[id*=’er-messa’]

6) Using Starting Text of an Attribute

You can use tag[attribute^=’starting text’] syntax.
(Note: For XPath we use  tag[starts-with( @attribute, ‘starting text’)] for this.)


Syntax: input[id^=’user’]

7) Using Ending Text of an Attribute

You can use tag[attribute$=’ending text’] syntax.


Syntax: input[id$=’message’]

8) Using Comma Operator to Implement OR Operation

You can use ,” operator between two CSS locator statements.


Syntax: form#get-input,input#user-message

9) Using Tag and ID

You can use Tag#Id” 


Syntax: input#user-message

10) Using Tag and Class

You can use Tag.Class” 


Syntax: input.form-control

11) Using first-of-type

You can use Tag:first-of-type”. It will select the first tag element.


Syntax: .tree-branch>ul>li:first-of-type

12) Using last-of-type

You can use Tag:last-of-type”. It will select the last tag element.


Syntax: .tree-branch>ul>li:first-of-type

Note: If you want to find last element or child you can use below locators.

  • Tag:nth-last-of-type(n)
  • Tag:nth-last-child(n

13) Using *:last-of-type

You can use *last-of-type”. It will select the last child of parent tag.


Syntax: .tree-branch>ul>*:last-of-type (Selects the last child of parent tag “ul”.)

14) Using tag:nth-of-type(n)

You can use tag:nth-of-type(n)”. It will select the nth tag element of the list.


Syntax: .tree-branch>ul>li:nth-of-type(3) (Selects 3rd li element.)

Note: If you don’t specify a tag as  *:nth-of-type(3) it will allow you to select the third child.

15) Using tag:nth-child(n)

You can use tag:nth-child(n)”. It will select the nth child.


Syntax: .tree-branch>ul>li:nth-child(3) (It will select the nth child.)

16) Using Sibling “+” Operator

You can use “E1+ E2. First, it finds E1 then select E2.

Sample HTML:

Syntax: li#mercedes + li

li#automation + li‘ will first go to li element with id ‘mercedes’ and then select its adjacent li which is ‘BMW’ list item.


Syntax: .tree-branch>ul>li:nth-child(3) + li (It will select the next element.)

17) Exclude a CSS Class Name in CSS Selenium Selector

You can exclude any of the class name with :not(.class-name) syntax.



Above selector excludes “xs-mt-o” class and selects below line as shown below figure.

Also, you can learn how to write Smart XPath locators in below article.


You can find many tricks in below pdf. I suggest you to save it.


See you in next article 😉