Css Selector

Css rules and pseudo-classes will help us move our Xpath locators to Css, a native approach on all browsers.

Css vs Xpath
Css selectors perfom far better that xpath.Here are some reasons

• Xpath engines are different in each browser, hace make them inconsistent
• IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility if its API, Hence we lose the advantage of using native browser features that webdriver inherent promotes
• Xpath tends to become complex and hence male hard to read.

However there are some situation where we need to use xpath, for example searching for a parent element or searching element by its text.

Xpath and Css syntax

We will use the tools Firepath

A direct child in Xpath is defined by the use of a "/" while on Css this is defined by the use the ">"

Show all labels that have a label that is a "a" within of a label that is a  "div"
Xpath  //div/a
Css    div>a

For example:

                                               

If an element could be inside another or one its child, in Xpath we use "//" and in Css just a white space.

For example
Xpath    //div//a
Css       div a

We can identify a element by id or class in Css
ID
An element is defined in  Xpath "[@id='name']" and in Css is used the "#"

Using Css locator

Using Xpath locator

Class
An element is define in Xpath "[@class="example"]" and in Css is used a "."
For example:
Using Css locator

Using Xpath locator

Find elements using Css locator

Find the elements subsequent

Grouping selectors

Find an element by type and  name

Selector pseudo-classes
Css selector in Selenium allow us to navigate lists with more methods to find elements
element:nth-child(number) :This select the elements sibling within of the tree of the DOM that   matches the condition

For example:

the nth-last-child: This selector allows us select one or more elements based on their source order, according to a formula.

X:empty: Find the elements that have no children

X: First child: Find the first child of X element

X:only-child: It any element which is the only child of its parent.

X:only-of-type: It is the last child of its parent that is an X element

For example:

X:first of type: It is first child of its parent that is an X element
For example:

                            

X:last-of-type: It is last child of its parent that is an X element
X:checked 
For example:

Sub-string matches
Css in selenium has an feature of allow partial string matches using ^=, $= or *=
* contains
^ starts with
$ ends with

For example