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

5.1 Види селекторів

Комбіновані селектори в CSS дозволяють вибирати елементи на основі їх взаємного розташування в дереві DOM. Вони забезпечують більш точне управління стилями, дозволяючи стилізувати елементи залежно від їх контексту. У CSS існує декілька типів комбінованих селекторів: нащадок, дочірній елемент, сусідній суміжний елемент і сусідній елемент.

Види комбінованих селекторів:

• Селектор нащадка (Descendant Selector)
• Селектор дочірнього елемента (Child Selector)
• Селектор сусіднього суміжного елемента (Adjacent Sibling Selector)
• Селектор загального сусіда (General Sibling Selector)

5.2 Селектор нащадка

Селектор нащадка вибирає всі елементи, які є нащадками вказаного елемента. Нащадками вважаються всі елементи, що знаходяться всередині вказаного елемента на будь-якому рівні вкладеності (це можуть бути не тільки діти, але й онуки та пра-правнуки).

Синтаксис:

    
      батько нащадок {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі <p>, які знаходяться всередині <div> */
      div p {
        color: blue;
      }
    
  

    
      <div>
        <p>Цей абзац буде синім.</p>
        <div>
          <p>Цей абзац теж буде синім, оскільки він нащадок "div".</p>
        </div>
      </div>
      <p>Цей абзац не буде синім.</p>
    
  

5.3 Селектор дочірнього елемента

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

Синтаксис:

    
      батько > дочірній {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає тільки <p>, які є безпосередніми дочірніми елементами .container */
      .container > p {
        color: green;
      }
    
  

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

5.4 Селектор сусіднього суміжного елемента

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

Синтаксис:

    
      попередній + наступний {
        властивість: значення;
        властивість: значення;
      }
    
  

    
      /* Вибирає <p>, який безпосередньо слідує за <h1> */
      h1 + p {
        color: red;
      }
    
  

    
      <h1>Заголовок 1</h1>
      <p>Цей абзац буде червоним, оскільки він безпосередньо слідує за "h1".</p>
      <p>Цей абзац не буде червоним.</p>
    
  

5.5 Селектор загального сусіда

Селектор загального сусіда вибирає всі елементи, які слідують за вказаним елементом і знаходяться на одному рівні вкладеності.

Синтаксис:

    
      попередній ~ наступний {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі <p>, які слідують за <h1> на одному рівні вкладеності */

      h1 ~ p {
        color: purple;
      }
    
  

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