# Reference for CSS and XPath Selector Notation

Below, we will list popular types of CSS selectors and their corresponding XPath selectors. Note that some outdated versions of browsers may not support certain types of selectors described below. Also, remember that all the elements listed below can be easily combined with each other within one large selector.

## 1. Element ID Value <a href="#bookmark6" id="bookmark6"></a>

An element's identifier in CSS is defined using **#**, while in XPath it is defined using **\[@id='example']**. Identifiers must be unique within the DOM tree of the page.

Examples:

CSS: `#example`

XPath: `//div[@id='example']`

## 2. Tag Name <a href="#bookmark7" id="bookmark7"></a>

In the previous example, we used the notation **//div** for XPath. This is the tag name, for example, **input** for a text field or button, **img** for an image, or **a** for a link. You can select an element simply by its tag name.

Examples:

CSS: `input`

XPath: `//input`

## 3. Class Name <a href="#bookmark8" id="bookmark8"></a>

In HTML code, class names are written within the value of the **class** attribute, and if there are multiple classes for the attribute, they are separated (or, more precisely, combined) by a space. However, in selectors, class names are specified a bit differently – in CSS, class names are listed with a dot, or separated by a dot from other parts of the same selector element, such as the tag name. In XPath, classes are specified in square brackets in the **@class** attribute.

Examples:

CSS: `div.example`

XPath: `//div[@class='example']`

## 4. Attribute Value <a href="#bookmark9" id="bookmark9"></a>

HTML tags can have many attributes, and you can find tags simply by their names and the values of these attributes. In the examples below, we will find the **input** tag by the **name** attribute and its value **"username"**:

CSS: `input[name='username']`

XPath: `//input[@name='username']`

You can also search for elements by the values of multiple attributes at once. Examples:

CSS: `input[name='login'][type='submit']`

XPath: `//input[@name='login' and @type='submit']`

## 5. Partial Attribute Value <a href="#bookmark10" id="bookmark10"></a>

If the value of the attribute you want to find the element by partially changes during the operation of the site, you can use only the part of the value that remains unchanged for the search. This option is available only in CSS selectors:

Searching for an element by the prefix of the attribute value:

CSS: `a[id^='id_prefix_']`

In this case, we will find a hyperlink whose **ID** attribute starts with **"id\_prefix\_"**. Searching for an element by the suffix of the attribute value:

CSS: `a[id$='_id_sufix']`

In this case, we will find a hyperlink whose **ID** attribute ends with **"\_id\_sufix"**. Searching for an element by a substring in the attribute value:

CSS: `a[id*='id_pattern']`

In this case, we will find a hyperlink whose **ID** attribute contains the substring **"id\_pattern"**.

## 6. Combining Results from Multiple Selectors <a href="#bookmark11" id="bookmark11"></a>

In the WhatsApp example above, all outgoing messages can be found using the selector **div.message-out**, while all incoming messages can be found using the selector **div.message-in**. But what if we want to get or iterate through both incoming and outgoing messages in one list, in the order they appear in the chat? In CSS, you can easily combine lists of elements obtained from different selectors using a comma. In XPath, the vertical bar symbol is used for the same purpose.

Example:

CSS: `div.message-out, div.message-in`

XPath: `//div[@class='message'] | //div[@class='message-in']`

## 7. Direct Child Element <a href="#bookmark12" id="bookmark12"></a>

HTML pages have a structure similar to XML, with child elements nested within parent elements. A direct child element is defined in CSS using the symbol >, and in XPath using the symbol **/**.

Examples:

CSS: `div > a`

XPath: `//div/a`

## 8. Child Element Lower in the Hierarchy <a href="#bookmark13" id="bookmark13"></a>

Describing the chain of all direct child elements is, firstly, tedious, and secondly, leads to unreliable selectors. If an element can be inside another or inside one of its child elements, it is defined in CSS simply with a space, and in XPath with **//**.

Examples:

CSS: `div a`

XPath: `//div//a`

## 9. Next Sibling <a href="#bookmark14" id="bookmark14"></a>

This type of selector is useful for iterating through similar elements at the same level of hierarchy, such as table rows or elements of ordered or unordered lists. The next sibling is the next element of a homogeneous list of elements at the same level of hierarchy as the current one.

Imagine you have two consecutive **input** tags in a form, like these:

`<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br>`

`<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required>`

For some reason, you cannot address the second **input** directly, but you have a stable selector for the first **input**. In this situation, to select the second **input** in CSS, you would write it like this:

`#username + input`

And in XPath like this:

`//input[@id='username']/following-sibling::input[1]`

## 10. Pseudo-classes for Homogeneous Elements <a href="#bookmark15" id="bookmark15"></a>

There are several pseudo-classes that allow you to select the desired element by its ordinal number at the required level of hierarchy (**nth-child**), or by its ordinal number and type of element (**nth-of-type**).

The selector below will select the fourth **LI** tag at the specified level of hierarchy:

CSS: `li:nth-of-type(4)`

If we want to select the fourth tag that is a descendant of the **LI** tag, regardless of the type of that tag, we can do it like this:

CSS: `li:nth-child(4)`

In XPath, you can specify the desired child element relative to the current element simply by appending the ordinal number in square brackets:

`//li[4]`