---
title: "Using combinators"
date: "2017-11-12T08:00:06+00:00"
summary: "Master CSS combinators in Site Studio to create precise, powerful styles. Learn how to use descendant, child, adjacent sibling, and general sibling selectors to target specific elements and enhance your website's design flexibility."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-combinators"
id: "a8dac0d3-638d-4d2b-95a9-e0e580852c42"
---

A Combinator determines the relationship between selectors. You can apply Combinators to Child selectors in the Style tree to change their relationship with their parent. For example, you can apply the Adjacent sibling combinator to change the relationship from 'Parent - child' to 'Siblings'.

There are four different combinators:

*   **Descendant selector (space) -** Match all elements that are descendants of a specified element
*   **Child selector (>) -** Selects all elements that are the immediate children of a specified element
*   **Adjacent sibling selector (+) -** Select all elements that are the adjacent siblings of a specified element
*   **General sibling selector (~) -** Select all elements that are siblings of a specified element

Adding a combinator
-------------------

To add a combinator you first need to add a child to your default element:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Default** button
3.  Within the Style tree, click on the **\+ icon** on the selector you want to add a child to
4.  In the menu, click on **Child selector**
5.  Enter an Element or .class in the **Child selector** field
6.  Click **Add**
7.  The Selector menu will close and the Child selector will be in the Style tree.

By default, your child will use the Descendant selector (space) combinator. To change this to use a different combinator:

1.  Click on the **\+ icon** next to your Child selector
2.  Click on **Combinator**
3.  The Combinator menu will open
4.  Click on a **Combinator** to apply it
5.  The menus will close and the **Combinator** will be applied to your selector.

![99d95893-adding-combinator.gif](https://acquia.widen.net/content/qodkdvktwg/web/99d95893-adding-combinator.gif?animate=true&v=afdfde86-ee0f-4bd1-9c20-e236f0697716)

When a combinator is applied, it's added before the element in the Style tree and the relationship is shown in (brackets) after the element.

![ccc6671b-Sibling-combinator.png](https://acquia.widen.net/content/jjexzfizgp/web/ccc6671b-Sibling-combinator.png?v=e334559f-570c-4b61-90f1-544b82257d9b)

Important

The tree represents nesting and does not always represent the relationship between two elements. For example, when a child selector is changed to an Adjacent sibling selector it still appears as nested but the relationship is one of a sibling.

Removing a combinator
---------------------

By default all child selectors are Descendant selectors. These use a (Space). For this reason, if you have applied a different combinator, for example, an Adjacent sibling (+),  you can remove it by re-applying the Descendent selector (Space).

To remove a combinator (reset to Descendant selector):

1.  Click on the **\+ icon** next to the element with the combinator you want to remove
2.  Click on **Combinators** in the menu
3.  Click on **Descendant selector (space)**
4.  This will apply the default Descendant selector and close the menu.

![fbc9ea53-removing-combinator.gif](https://acquia.widen.net/content/705kmo5bko/web/fbc9ea53-removing-combinator.gif?animate=true&v=f12dfce2-17eb-44e5-8fc6-0b0c0ca0e8fd)