Урок 78 із 239
33%
← Назад

Універсальний селектор у CSS

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

Що таке універсальний селектор *

Універсальний селектор * вибирає абсолютно всі елементи на сторінці.

Його часто використовують для скидання стандартних стилів браузера або для застосування загальних правил.

Приклад №1. Вибір усіх елементів

* {
  color: red;
}
💡 Показати підказку

Символ * означає: вибрати будь-який HTML елемент.

Приклад №2. Вибір усіх елементів всередині div

<div>
  <h2>Title</h2>
  <p>
    Text
  </p>
  <span>
    Span text
  </span>
</div>
div * {
  color: red;
}

Приклад №3. Безпосередні дочірні елементи

div > * {
  color: red;
}

Приклад №4. Комбінація селекторів

<div>
  <p>
    <span>
      text
    </span>
  </p>

  <section>
    <span>
      text
    </span>
  </section>
</div>
div * span {
  color: red;
}
❗ Важливо:

Різниця між div * і div > *: перший вибирає всі вкладені елементи будь-якої глибини, другий — тільки безпосередніх дітей.

Практичне завдання

📌 Завдання:
  1. №1
  3. Дано код:
  5. <main>
  6. <p>---</p>
  7. <p>---</p>
  9. <div>
  10. <p>+++</p>
  11. <p>+++</p>
  12. </div>
  14. <section>
  15. <p>+++</p>
  16. <p>+++</p>
  17. </section>
  18. </main>
  20. Напишіть селектор, який вибере всі абзаци, що знаходяться всередині будь-якого батьківського елемента всередині main.
💡 Показати підказку

Потрібно вибрати p, які знаходяться не напряму в main, а всередині інших елементів. Використовуйте main * p.

✅ Показати відповідь
Відповідь: main * p