Basic Concepts of Selectors

Let's take the search button from the Wikipedia website as an example.

For a website like Wikipedia, copying a selector is usually sufficient, as described in Copy Selectors. Building custom selectors is typically needed if you create TaskBots for "tricky" dynamic websites such as social media. Here, Wikipedia is merely used as an example.

Open Chrome DevTools by right-clicking the search icon and selecting Inspect.

Now let's zoom in on the highlighted element on the right:

Tag

A CSS selector starts with a tag. Examples include div, a, main, li, etc. It's the first word that is marked purple (see picture above).

For Wikipedia's search button, the tag is button.

Attributes

Most selectors have several attributes such as class, id, aria-label, etc. One selector can have one, many or no attributes. Attributes are marked brown (see picture above).

For Wikipedia's search button, the attributes are class and type.

Value

Attributes usually have values.

For Wikipedia's search button, the value of class is pure-button pure-button-primary-progressive and the value of type is submit.

Building a Selector

To build a selector, use this structure:

tag[attribute='value']

Note that there is no space between tag and attribute inside the square brackets. Note that the value is wrapped in quotes.

Or, if your element has several attributes, then the structure can be:

tag[attribute1='value'][attribute2='value']

So for Wikipedia's search button in the above example, the selector would look like this:

button[class='pure-button pure-button-primary-progressive'][type='submit']

Video Tutorial: Basic Concepts