# CSS Selector Notation with Examples

Let's take a look at the long selector from WhatsApp that we wrote above:

`#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._2xy_p._3XKXx > button`

And immediately look at the section of code on the web page that corresponds to this element:

<figure><img src="https://3212714295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI0zUnKkOuy6lWt7DZ46u%2Fuploads%2Fgit-blob-ad8ab6cb9a7c40b63967eb3e79ea41bd61d0e1b5%2F1%20(5).png?alt=media" alt=""><figcaption></figcaption></figure>

For your convenience, we have highlighted in red all the code sections and identifiers that are part of this selector, so you can match them in the selector and in the HTML code of the page. Let's start tracing the selector from the very beginning and go down the hierarchy of nested tags on the web page to the control element we need. The notation `#main` means that we need to find an element whose `id` attribute has the value `main`. Unlike class names, which can be repeated many times, `id` elements appear on the page only once. In this case, this notation found us the tag `<div id="main">`, and the tag `div` itself or its class played no role. The symbol `>` means that we need to go down the hierarchy to the child elements of the found tag, and the subsequent part of the selector should be searched among them.

Next is the tag name `footer`, here we found the corresponding tag simply by its name, without any additional specifications. Next, we see another symbol `>`, which means we go even lower in the hierarchy of elements. The next notation `div._2lSWV._3cjY2.copyable-area` means that we need to find a `div` tag, among the classes of which must be `_2lSWV`, `_3cjY2`, and `copyable-area` at the same time. The sought element may have more classes, we specify only the necessary minimum that we need. Thus, we find the tag `<div class="_2lSWV _3cjY2 copyable-area">`, which fits this selector. Note that in the selector, class names are connected by a dot (which in this case means the logical operator `AND`), while in the text of the `class` attribute, in the tag itself, these same class names are listed with a space – this is an important distinction between the notation of class names in tag attributes and in selectors.

We go even lower, find the next element simply by the tag name `div`. Since there are many `div` tags at this level of hierarchy, the first one encountered will be taken. We go even lower, the notation `span:nth-child(2)` tells us that we need to find a `span` tag, and then go to the second child element of this tag. Then we find the `div` element again simply by the name of the element. Then we find the tag `<div class="_1VZX7">` which corresponds to the selector `div._1VZX7` – by the tag name and class name in this tag. Then we find the element `<div class="_2xy_p _3XKXx">` by the selector `div._2xy_p._3XKXx`, and finally, we find the child tag `button` simply by the name of the tag itself. This was quite a long chain, and many things can go wrong along this path if the site gets updated. However, in this example, we looked at the different options for notation used in CSS selectors.

Compare this with the short selector `button[aria-label="Send"]`, which highlights the same control element, and which we proposed as an alternative. Why did we manually create such a selector? First, we looked at the final tag that we need:

`<button data-tab="11" aria-label="Send" class="tvf2evcx oq44ahr5 lb5m6g5c svlsagor p2rjqpw5 epia9gcq">`

We immediately dislike the class names – there are many of them, and they look like arbitrary combinations of letters and numbers, which means that in a new version of the web page they will almost certainly change. The tag name `button` looks promising. There aren't too many buttons on this page. However, the name `button` itself may not be unique – there could be other buttons on the page. Of course, we can use a modifier like `button:nth-child(1)`, which will point us to the exact ordinal number of the same type of element on the page. Or the same can be done by entering the number `1` in the Index column to the right of the CSS column in the Sherpa RPA selector editor – this will give the same effect.

But who can guarantee that with the next update of the page, the order or number of buttons on the page will not change? The text "Send" in the `aria-label` attribute looks quite unique – this is the text that will replace the control element in "screen readers" and other accessibility tools for people with disabilities. It is very unlikely that the website developers will change this name in future versions of the web application, so we will take it as a characteristic distinguishing attribute. To specify that we need only such a `button` tag whose `aria-label` attribute has the value "Send", we use square brackets - `button[aria-label="Send"]`. We have obtained a sufficiently reliable selector that is not embarrassing to use in the production of our Robot.