# Combinators

[Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) are a special type of selectors that are used to combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. There are four types of combinators:

* descendant (space)
* child (`>`)
* adjacent (`+`)
* sibling (`~`)

### Descendant <a href="#descendant" id="descendant"></a>

The **descendant combinator**, which is represented with space, selects all elements that are descendants of other selectors. The descendants are not limited to direct children.

This is the most commonly used combinator as it can affect the largest number of elements. Let's look at an example. If we had a navbar with a dropdown containing its own set of links then we would have anchor tags that are not direct children of the navbar.

{% tabs %}
{% tab title="HTML" %}

```markup
<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropdown-button">Dropdown &#9663;</button>
    <div class="dropdown-content">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
    </div>
  </div>
</nav>
```

{% endtab %}
{% endtabs %}

Even so, it would be possible to style all of the links the same by using the descendant combinator.

{% tabs %}
{% tab title="CSS" %}

```css
.navbar {
  display: flex;
  padding: 10px;
  background-color: black;
  font-family: sans-serif;
}
```

{% endtab %}
{% endtabs %}

If we wanted to select and style all of the anchor tags, we could use the descendant combinator.

{% tabs %}
{% tab title="CSS" %}

```css
.navbar a {
  padding: 10px;
  color: white;
  text-decoration: none;
}
```

{% endtab %}
{% endtabs %}

Notice how both main navbar links and the dropdown-content links were styled. That is because even thought these links do not share the same parent element, they are still descendants of the navbar.

### Child <a href="#child" id="child"></a>

The **child combinator**, which is represented as a `>`, is to select only those elements that are direct children of the other selectors. This is different from the descendant combinator in that it will not affect any element beyond the direct children.

Let's return to our navbar example. But this time we are going to make an alteration. We have decided that while the background of the navbar is black, the dropdown content will be off-white.

{% tabs %}
{% tab title="CSS" %}

```css
.dropdown-content {
  background-color: #f9f9f9;
}
```

{% endtab %}
{% endtabs %}

This of course will make seeing the links very difficult to see. To fix this problem, let's target the main links using the child combinator instead. Then we can style the dropdown content links separately.

{% tabs %}
{% tab title="CSS" %}

```css
.navbar > a {
  padding: 10px;
  color: white;
  text-decoration: none;
}
```

{% endtab %}
{% endtabs %}

### adjacent

The **adjacent combinator**, which is represented with a `+`, will select the element that is the very next sibling to other selectors, if any exists. Let's see this in action. The following code will create a row of red boxes that turn blue when hovered over them.

{% tabs %}
{% tab title="CSS" %}

```css
.boxes {
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: indianred;
}

.box:hover {
  background-color: cadetblue;
}
```

{% endtab %}
{% endtabs %}

But now, let's add an extra bit of code so that when you hover over a box, the next will turn orange, and we will use the **adjacent combinator** to do it.

{% tabs %}
{% tab title="CSS" %}

```css
.box:hover + .box {
  background-color: goldenrod;
}
```

{% endtab %}
{% endtabs %}

Now, let's go back to our navbar. We made some additional changes to the navbar.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ke-ren.gitbook.io/web-design/html-css-js/css-index/css-selectors/combinators.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.