> For the complete documentation index, see [llms.txt](https://docs.zerowork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zerowork.io/using-zerowork/using-selectors/how-to-build-custom-selectors/basic-concepts-of-selectors.md).

# 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](/using-zerowork/using-selectors/copy-selectors.md). 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*.

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FguurRfkDz1eX1njxOnyp%2FScreenshot%202022-04-06%20at%2020.21.14.png?alt=media\&token=b2a8b793-9b51-4029-92a4-8e1bfbff6e66)

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

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FSo0YXDfN0rAJ47C1b03i%2FScreenshot%202022-04-06%20at%2020.34.27.png?alt=media\&token=c2950739-5b7e-4e82-82f0-b4d8c797666a)

#### **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***. 

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FpPVpLGp3TTqEMcEXXL9E%2FScreenshot%202022-04-06%20at%2020.44.40%20copy%202.png?alt=media\&token=2b5f0012-4c39-49d8-906f-b3fd1d5879f9)

#### **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.*** 

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FVN5NIhUV52b7q5I0MBVb%2FScreenshot%202022-04-06%20at%2020.44.40%20copy.png?alt=media\&token=d58ebe5a-c785-4dc8-bdc2-dd28e3f37b4b)

#### **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*.

![](https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FbklKad8J8RUHSgEkjw6V%2FScreenshot%202022-04-06%20at%2020.44.40.png?alt=media\&token=dd55c59a-16b5-4770-bed2-bd84a7929308)

### **Building a Selector**

To build a selector, use this structure:

<mark style="background-color:yellow;">tag\[attribute='value']</mark>

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:

<mark style="background-color:yellow;">tag\[attribute1='value']\[attribute2='value']</mark>

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

<mark style="background-color:yellow;">button\[class='pure-button pure-button-primary-progressive']\[type='submit']</mark>

### **Video Tutorial: Basic Concepts**

{% embed url="<https://youtu.be/-W-ug4g_wjY>" %}