What is CSS selector?
CSS(Cascading Style Sheets) selector is a pattern/locator to identify elements in HTML DOM/web page. The element finding is generally carried out based on different attributes such as name id, name, class and so on.
CSS selector is used in vast to find web elements in selenium and any java script language based automation.
There are various techniques to create custom CSS selector. I will describe one by one as follows.
1. # cssSelector: This cssSelector refers to id, which will select all element which is having id attribute in the DOM.
Syntax:
tagname#id
or
#id
From the below image if we want to find the search box using id selector, we can use
input#search or # search
2. . cssSelector(dot cssSelector): This cssSelector refers to class, which will select all element which is having class attribute in the DOM.
Syntax:
tagname.classname
or
.classname
From the below image if we want to find the search box using class selector, we can use
input.search or .search
3. cssSelector using combination of id and classname: This cssSelector is build using combination of id and class.
Syntax:
tagname#id.classname
or
tagname.classname#id
From the below image if we want to find the search box using combination of id and classname selector, we can use
input#search.text or input.text#search
4. cssSelector using parent and child relationship: This cssSelector is build using parent and child tags relationship.
Syntax:
parent_tagname>child_tagname
From the below image, we see the parent is div.dd-inner and its corresponding child is ul. So we can establish the relationship between them as div.dd-inner>ul
5. cssSelector using tagname with single attribute: This cssSelector refers to particular element using the tagname with single attribute value.
Syntax:
tagname[attribute='value']
From the below image if we want to find the search box using tagname and single attribute, we can use
tagname=input, attribute=id and attribute_value=search and combinedly the cssSelector as per syntax is as follows.
input[id='search']
6. cssSelector using tagname with multiple attribute: This cssSelector refers to particular element using the tagname with multiple attribute value.
Syntax:
tagname[attribute1='value'][attribute2='value']
From the below image if we want to find the search box using tagname and multiple attributes, we can use tagname=input, attribute1=type, attribute1_value=text, attribute2=id, attribute2_value=search and combinedly the cssSelector as per syntax is as follows.
input[type='text'][id='search']
7. cssSelector based on contains text: This cssSelector is used to find element that contains specific text. It is used *= that means text(regardless of order) contains in element.
Syntax:
tagname[attribute*='abc']
From the below image if we want to select ABOUT US menu, we can use tagname=input and attribute=href with * , attribute_value=aboutus.htm in which contains text outus and combinedly the cssSelector as per syntax is as follows.
input[href*='outus']
8. cssSelector based on starting the text: This cssSelector refers to any attribute, which will select the first portion text of element, it is used ^= that means starts with.
Syntax:
tagname[attribute^='first_text']
From the below image if we want to select ABOUT US menu, we can use tagname=input and attribute=href with ^ , attribute_value=aboutus.htm in which text starts with about and combinedly the cssSelector as per syntax is as follows.
input[href^='about']
9. cssSelector based on ending the text: This cssSelector refers to any attribute, which will select the last portion text of element, it is used $= that means ends with.
Syntax:
tagname[attribute$='last_text']
From the below image if we want to select ABOUT US menu, we can use tagname=input and attribute=href with $ , attribute_value=aboutus.htm in which text ends with us.htm and combinedly the cssSelector as per syntax is as follows.
input[href$='us.htm']
10. cssSelector using comma separator: This cssSelector is used combination of more cssSelector using comma separator.
Syntax:
tagname.attribute1.attribute2, tagname.attribute
From the below image if we want to select top header menus, we can use comma separator between two cssSelectors. first tagname=div, attribute=class, attribute_value=menu-icon, second tagname=a, attribute=class, attribute_value=top-heading and combinedly the cssSelector as per syntax is as follows.
div.menu-icon, a.top-heading
11. cssSelector using first-of-type: This cssSelector selects the first element among the number of elements.
Syntax:
tagname#attribute>tagname:first-of-type
From the below image if we want to select the first element ABOUT US among eight headers menu, we can use first-of-type and the cssSelector is as follows.
nav#ddmenu>ul>li:first-of-type
12. cssSelector using last-of-type: This cssSelector selects the last element among the number of elements.
Syntax:
tagname#attribute>tagname:last-of-type
From the below image if we want to select the last element CAREER among eight headers menu, we can use last-of-type and the cssSelector is as follows.
nav#ddmenu>ul>li:last-of-type
13. cssSelector using nth-of-type : This cssSelector selects the element of any position among the number of elements.
If the index of nth-of-type is n, the cssSelector selects all elements.
Syntax:
For the element of any position:
tagname#attribute>tagname:nth-of-type(5)
For all elements:
tagname#attribute>tagname:nth-of-type(n)
From the below image if we want to select the 4th element INDUSTRIES among eight headers menu, we can use nth-of-type and the cssSelector is as follows.
nav#ddmenu>ul>li:nth-of-type(4)
14. cssSelector based on siblings of element: This cssSelector finds the siblings of element. To finds the siblings of an element + operator is used after finding that element.
Syntax:
tagname.attribute+tagname
From the below image if we want to select the siblings of ABOUT US menu , we can use + operator after selecting ABOUT US menu and the cssSelector is as follows.
nav#ddmenu>ul>li+li
15. cssSelector using not() method: This cssSelector includes not() method. The element which is not required not() method excludes that element. not() method is used after all finding element and : is used before not() method.
Syntax:
tagname.attribute:not(.attribute)
From the below image if we want to exclude top search filed among six text filed elements we need to use :not() method and search filed id is used in :not(#search) method. So the cssSelector is as follows.
input[type='text']:not(#search)
That is the end. I hope this article will help to build custom cssSelector.
