---
id: 63ee35370d8d4841c3a7091e
videoId: LGQuIIv2RVA
title: Основи CSS. Запитання E
challengeType: 15
dashedName: css-foundations-question-e
---

# --description--

Комбінатори дозволяють комбінувати декілька селекторів по-іншому, а не групуючи чи об’єднуючи, оскільки вони показують зв’язок між селекторами. Загалом існує чотири типи комбінаторів, але ми зупинимося на нащадку, який представлений у CSS пробілом між селекторами. Нащадок дозволить обирати лише ті елементи, які відповідають останньому селектору за умови, що вони також мають предка (батька, прабатька тощо), який відповідає попередньому селектору.

`.ancestor .child` обрав би елемент з класом `child`, якщо він має предка із класом `ancestor`. Також можна вважати, що дочірній елемент буде обрано лише тоді, якщо він розміщений всередині `ancestor`. Перегляньте наведений нижче приклад та подумайте, чи ви можете сказати, які елементи буде обрано на основі наданого правила CSS:

```html
<!-- index.html -->

<div class="ancestor"> <!-- A -->
  <div class="contents"> <!-- B -->
    <div class="contents"> <!-- C -->
    </div>
  </div>
</div>

<div class="contents"></div> <!-- D -->
```

```css
/* styles.css */

.ancestor .contents {
  /* some declarations */
}
```

Перші два елементи з класом `contents` (`B` та `C`) будуть вибрані, а останній елемент (`D`) — ні. Ваша відповідь була правильною?

До правила можна додати необмежену кількість комбінаторів, тому `.one .two .three .four` будуть дійсними. Буде обрано елемент з класом `four`, якщо він має предка з класом `three`, та якщо предок має власного предка з класом `two`, і так далі. Старайтесь уникати вибирати елементи, які вимагають такого рівня вкладення, оскільки це може бути заплутано та довго, а також може призвести до проблем щодо специфічності.

# --question--

## --text--

Що робить нащадок?

## --answers--

Групує певні класи, які мають однакові оголошення.

---

Дозволяє вибирати елемент з однаковими `class` та `id`.

---

Дозволяє вибирати елемент, базуючись на його зв’язку з предком (батьком, прабатьком і т. д.).


## --video-solution--

3
