To find the web element on the page, the CSS locator can be used.

Syntax is - div[ID="id value"] > button[value="value text"];

selects the button with its value property set at value text if children of the id value are div

PROS:

• Faster than XPath
• good balance between STRUCTURE and attributes
• Allows selection of elements by their surrounding context

CONS:

• More complex and require a steeper learning curve

Structure-Dependent Or Not?

Locators are classified into two categories ie Structure-based locators and Attributes-based locators.

• Locators that depends on the structure of the page to find elements are structured based locator. Below locators are structure-based locators.
  •  XPath
  • DOM
  • CSS
•  Locators that depend on the attributes of the elements to LOCATE are Attribute-based locators. Below locators are the Attribute-based locators.
  • Identifier
  • Id
  • Name
  • Link
  • CSS
• Consider all these points pertaining to CSS before choosing a locator strategy
• CSS is used widely because it is flexible and GIVES a good balance between using structure and attributes to find the elements.