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".