Different structure to XPath, more similar to defining a style in a CSS Stylesheet. Can identify and connect to DOM elements. They come in different forms such as:
- Simple selectors – Use ID or class to find elements
- Attribute selectors – Find elements based on values given to them
- Pseudo selectors – Used in situations where the state of the element is provided by CSS like on-hover attributes for example
How to create a CSS Selector (simple explanation):
Start with the element type. E.g.
awill find an anchor tag.
Provide attributes in square brackets. E.g.
a[id=’wikipediaLink’]will find an anchor tag with an ID equal to “wikipediaLink”.
Can use more advanced search methods by providing reserved key symbols in the square brackets with the
a[id*=’Link’]will find an element where the ID contains the text "Link".
Use greater than symbol to add children to search. E.g.
a > label[@id=’linkLabel’], This will search for the first label element that is a descendant of an anchor tag and has an id of "linkLabel".