Learn Selenium With Quiz – Basic Level 8 – CSS Selector

Direct child is immediate child of a node. For example:- A Son of a father will be direct child. We can represent a direct child of node using '>'. For e.g. "div > input" will locate all direct input child of div tag.

All child of a parent node will include all immediate child and child of child. We can represent all child of node using a whitespace . For e.g. "div input" will locate all input child of div tag.

The CSS syntax of locating an element using its attribute is below:- tagName[attributeName='attributeValue']. Remember here that we do not use '@' symbol like XPath here.

The CSS syntax of locating an element using its multiple attribute is below:- tagName[attributeName='attributeValue'][attributeName='attributeValue']....... Add more attribute with its value in similar fashion. Remember here that we do not use '@' symbol like XPath here.

In CSS, we can locate an element with its id using '#'. For example if an input tag has an id with value "firstName", CSS will be #firstName.

In CSS, we can locate an element with its class using '.'(dot) . For example if an input tag has a class with value "firstName", CSS will be .firstName.

'#' is short notation to represent id. input#someValue :- All input tags with id as someValue #someValue :- All tags with id as someValue

',' is short notation to represent class name. input.someValue :- All input tags with class as someValue .someValue :- All tags with class as someValue

'^' represent starts with.

'$' represents ends with.