Комбіновані селектори

1. Типи комбінованих селекторів

CSS комбіновані селектори дозволяють обирати елементи на основі їх ієрархічного положення відносно інших елементів. Це робить їх корисними для застосування стилів до елементів, які залежать від контексту, або коли нам потрібно стилізувати елементи у складній структурі. Комбіновані селектори — це потужний інструмент для точного вибору, коли одного класу або ідентифікатора недостатньо. Розглянемо основні типи комбінованих селекторів у CSS, включаючи селектор нащадка, селектор дочірнього елемента, селектор сусіднього елемента і селектор загального сусіда.

Комбіновані селектори у CSS включають різні способи вибору елементів, засновані на ієрархії HTML. Основні типи комбінованих селекторів:

• Селектор нащадка (Descendant Selector): обирає елементи, які знаходяться всередині іншого елемента, на будь-якому рівні вкладеності.
• Селектор дочірнього елемента (Child Selector): обирає тільки прямих (безпосередніх) нащадків певного елемента.
• Селектор сусіднього елемента (Adjacent Sibling Selector): обирає елемент, який йде одразу після іншого елемента на тому ж рівні ієрархії.
• Селектор загального сусіда (General Sibling Selector): обирає всі елементи одного рівня, які йдуть після зазначеного елемента.

Кожен із цих селекторів підходить для різних випадків і дозволяє точно обирати елементи залежно від їх розташування на сторінці.

2. Селектор нащадка (Descendant Selector)

Селектор нащадка обирає всі елементи всередині іншого елемента, незалежно від рівня вкладеності. Він записується через пробіл між селекторами. Цей тип селектора корисний, коли потрібно стилізувати елементи всередині іншого елемента, наприклад, всі <p> всередині <div> із заданим класом.

.container p {
  color: blue;
}

<div class="container">
  <p>Цей текст буде синім, оскільки знаходиться в контейнері.</p>
  <div>
    <p>Цей текст теж буде синім.</p>
  </div>
</div>
<p>Цей текст залишиться без змін, оскільки не знаходиться всередині контейнера.</p>

Тут селектор .container p обере всі елементи <p> всередині елемента з класом container, включаючи елементи на будь-якому рівні вкладеності.

3. Селектор дочірнього елемента (Child Selector)

Селектор дочірнього елемента обирає тільки безпосередніх нащадків елемента. Він записується з використанням символу > між селекторами. Цей селектор зручний, коли потрібно застосувати стиль тільки до елементів верхнього рівня вкладеності і не зачіпати більш глибокі рівні.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Цей текст буде жирним.</p>
    <div>
      <p>Цей текст залишиться звичайним, оскільки він не є прямим нащадком container.</p>
    </div>
  </div>
      
    

Тут тільки перший <p> стане жирним, оскільки він є прямим нащадком .container, а вкладений <p> не зміниться.

4. Селектор сусіднього елемента (Adjacent Sibling Selector)

Селектор сусіднього елемента обирає елемент, який безпосередньо йде за іншим елементом і знаходиться на одному рівні вкладеності. Цей селектор позначається символом + між селекторами і зручний для застосування стилів до елемента, який йде одразу після іншого, наприклад, до першого абзацу, що йде після заголовка.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Заголовок</h2>
  <p>Цей текст стане зеленим, оскільки він йде одразу за заголовком.</p>
  <p>Цей текст не зміниться, оскільки він не є сусіднім елементом після h2.</p>
      
    

Тут селектор h2 + p змінить колір тільки у першого абзацу <p>, який йде одразу за <h2>.

5. Селектор загального сусіда (General Sibling Selector)

Селектор загального сусіда обирає всі елементи на одному рівні вкладеності, які йдуть після зазначеного елемента, незалежно від того, знаходяться вони одразу за ним чи через кілька елементів. Цей селектор позначається символом ~ між селекторами.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Заголовок</h2>
  <p>Цей абзац буде нахиленим.</p>
  <div>
    <p>Цей абзац також буде нахиленим, оскільки він є сусідом h2 на одному рівні вкладеності.</p>
  </div>
      
    

У цьому прикладі селектор h2 ~ p обирає всі <p> елементи, які йдуть після <h2> на тому ж рівні, незалежно від того, чи є між ними інші елементи.

6. Приклад використання всіх комбінованих селекторів

Нижче представлений приклад HTML і CSS, у якому демонструється використання всіх комбінованих селекторів для вибору різних елементів залежно від їхнього розташування на сторінці.

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Приклад комбінованих селекторів CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Абзац, який є нащадком та дочірнім елементом .container.</p>
    <div>
      <p>Абзац, який є нащадком, але не дочірнім елементом .container.</p>
    </div>
  </div>
  <h2>Заголовок</h2>
  <p>Абзац, який є сусіднім елементом h2.</p>
  <div>Цей блок не вплине на наступні абзаци.</div>
  <p>Абзац, який є спільним сусідом h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Приклад комбінованих селекторів CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Абзац, який є нащадком та дочірнім елементом .container.</p>
    <div>
      <p>Абзац, який є нащадком, але не дочірнім елементом .container.</p>
    </div>
  </div>
  <h2>Заголовок</h2>
  <p>Абзац, який є сусіднім елементом h2.</p>
  <div>Цей блок не вплине на наступні абзаци.</div>
  <p>Абзац, який є спільним сусідом h2.</p>
</body>
</html>

/* Селектор нащадка */
.container p {
  color: blue;
}

/* Селектор дочірнього елемента */
.container > p {
  font-weight: bold;
}

/* Селектор сусіднього елемента */
h2 + p {
  color: green;
}

/* Селектор загального сусіда */
h2 ~ p {
  font-style: italic;
}