CSS Selectors Simply Explained

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*

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.