CSS Selectors Simply Explained
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.
a
will 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
attributes. E.g.
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".
Leave a reply
Your email address will not be published. Required fields are marked*