> 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/addressing-siblings.md).

# Addressing Siblings

This is a more advanced concept and is not needed in most cases. Feel free to skip this section.

Sometimes, the element you want to address is not inside another element but sits next to it on the same hierarchy level. In CSS, such elements are called **siblings**.

You can use:

* `+` to select the **next sibling**
* `~` to select **any following sibling**

For example, imagine three elements on the same hierarchy level: heading button button.

To select the button directly after the heading:

<mark style="background-color:yellow;">heading + button</mark>

To select any button that appears after the heading on the same hierarchy level:

<mark style="background-color:yellow;">heading \~ button</mark>

Sibling selectors are useful when the relationship between neighboring elements is more reliable than their individual attributes.

### Video Tutorial: Siblings

{% embed url="<https://youtu.be/5Wg0WD4MQLU>" %}