EasyCode365EasyCode365

Розширені CSS-селектори та комбінатори

Базові селектори допомагають стилізувати прості сторінки. Коли HTML стає більшим, часто потрібно стилізувати елементи залежно від того, де вони розміщені, всередині якого елемента вони знаходяться або які атрибути мають.

Розширені селектори допомагають точніше вибирати елементи. Так можна писати чистіший HTML і не додавати клас до кожного тегу.

Коротке нагадування про базові селектори

Ти вже знаєш ці поширені селектори:

  • Селектор елемента вибирає всі теги одного типу, наприклад p.
  • Селектор класу починається з . і вибирає елементи з цим класом, наприклад .button.
  • Селектор ID починається з # і вибирає один унікальний елемент, наприклад #main-header.

Розширені селектори спираються на ці основи.

Що таке комбінатор?

Комбінатор — це символ або пробіл, який описує зв'язок між двома селекторами.

Наприклад, комбінатор може означати:

  • Вибрати абзац усередині картки.
  • Вибрати лише прямі елементи всередині меню.
  • Вибрати кнопку, яка стоїть одразу після поля введення.

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

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

Синтаксис:

Лише читання

Пробіл між селекторами важливий.

Можна редагувати
<div class="card">
  <h2>Ласкаво просимо</h2>
  <div>
    <p>Цей абзац знаходиться всередині картки.</p>
  </div>
</div>

<p>Цей абзац знаходиться поза карткою.</p>

<style>
  .card p {
    color: blue;
  }
</style>

Правило .card p означає: знайди будь-який елемент p, який знаходиться будь-де всередині елемента з класом card.

Абзац поза .card не вибирається.

Використовуй це, коли хочеш стилізувати вміст усередині секції, картки, статті або навігації.

Дочірній селектор

Дочірній селектор вибирає лише прямих дітей. Він не вибирає онуків або елементи, вкладені глибше.

Синтаксис:

Лише читання
Можна редагувати
<div class="toolbar">
  <button>Зберегти</button>
  <button>Переглянути</button>

  <div class="more-actions">
    <button>Видалити</button>
  </div>
</div>

<style>
  .toolbar > button {
    background-color: blue;
    color: white;
    padding: 8px 12px;
  }
</style>

Правило .toolbar > button означає: вибери лише елементи button, які знаходяться безпосередньо всередині .toolbar.

Кнопка Видалити не вибирається, бо спочатку вона знаходиться всередині .more-actions. Вона глибше, ніж один рівень.

Використовуй це, коли в секції є прямі елементи й вкладені елементи, які мають виглядати по-різному.

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

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

Сусідні елементи мають спільного батька.

Синтаксис:

Лише читання
Можна редагувати
<article>
  <h2>Вивчаємо CSS</h2>
  <p>Цей перший абзац вводить у тему уроку.</p>
  <p>Цей другий абзац продовжує думку.</p>
</article>

<style>
  h2 + p {
    margin-top: 0;
    color: blue;
    font-size: 20px;
  }
</style>

Правило h2 + p означає: вибери елемент p лише тоді, коли він стоїть одразу після h2.

Другий абзац не вибирається, бо він не стоїть одразу після заголовка.

Використовуй це, коли перший абзац після заголовка потребує особливого стилю.

Загальний селектор сусідів

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

Вони мають мати спільного батька, але не обов'язково повинні стояти поруч.

Синтаксис:

Лише читання
Можна редагувати
<section>
  <h3>Інгредієнти</h3>
  <strong>Список для сніданку</strong>
  <p>Борошно</p>
  <p>Яйця</p>
  <p>Молоко</p>
</section>

<style>
  h3 ~ p {
    color: blue;
  }
</style>

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

Елемент strong між ними не має значення.

Використовуй це, коли кілька елементів після заголовка або підпису потребують однакового стилю.

Селектори атрибутів

Селектор атрибута вибирає елементи за їхніми HTML-атрибутами.

Атрибути — це додаткові дані всередині HTML-тегів, наприклад href, type, alt або placeholder.

Синтаксис:

Лише читання
Можна редагувати
<label>
  Ім'я
  <input type="text" placeholder="Введи своє ім'я" />
</label>

<label>
  Пароль
  <input type="password" placeholder="Введи пароль" />
</label>

<style>
  input[type="text"] {
    background-color: lightyellow;
  }
</style>

Правило input[type="text"] означає: знайди елементи input, у яких атрибут type точно дорівнює text.

Поле пароля не вибирається, бо його тип — password.

Використовуй це для форм, посилань, зображень та інших елементів, де атрибут пояснює тип елемента.

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

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

Синтаксис:

Лише читання
Можна редагувати
<h1>Заголовок</h1>
<p>Текст абзацу</p>
<button>Натисни</button>

<style>
  * {
    color: blue;
  }
</style>

Правило * означає: вибери всі елементи на сторінці.

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

Типові помилки початківців

  • Писати .cardp замість .card p. .cardp шукає клас із назвою cardp. .card p шукає абзац усередині .card.
  • Використовувати >, коли елемент не є прямою дитиною. Дочірній селектор дивиться лише на один рівень вниз.
  • Використовувати +, коли елемент не стоїть одразу після іншого. Селектор сусіднього елемента вибирає лише наступного відповідного сусіда.
  • Використовувати + або ~ для елементів, які не мають спільного батька. Селектори сусідів працюють лише між сусідніми елементами.
  • Надто часто використовувати *. Універсальний селектор може зробити CSS менш передбачуваним на великих сторінках.

Міні-завдання

Подивись на цей HTML:

Можна редагувати
<div class="box">
  <h2>Мій заголовок</h2>
  <a href="https://example.com">Натисни тут</a>
</div>

<style></style>

Напиши CSS-правило із селектором нащадка, яке зробить посилання всередині .box помаранчевим.

Відповідь:

Лише читання

Короткий тест

Питання 1: Який символ використовується для селектора прямої дитини?

Відповідь: Символ більше >.

Питання 2: Який селектор вибирає всі елементи на сторінці?

Відповідь: Універсальний селектор *.

Питання 3: Яка різниця між + і ~?

Відповідь: + вибирає лише наступного сусіда. ~ вибирає всіх відповідних сусідів, які йдуть після.

Малий виклик

Спробуй стилізувати цю картку форми:

  • Використай дочірній селектор, щоб зробити текст прямого абзацу сірим.
  • Використай селектор атрибута, щоб додати полю введення сіру рамку.
  • Використай селектор сусіднього елемента, щоб зробити текст кнопки жирним.
Можна редагувати
<div class="login-card">
  <p>Увійди нижче.</p>
  <input type="text" placeholder="Користувач" />
  <button>Увійти</button>
</div>

<style>
  /* 1. Стилізуй прямий абзац */

  /* 2. Стилізуй текстове поле */

  /* 3. Стилізуй кнопку після input */
</style>

Один можливий варіант:

Лише читання

Підсумок

  • Селектор нащадка використовує пробіл і вибирає вкладені елементи.
  • Дочірній селектор > вибирає лише прямих дітей.
  • Селектор сусіднього елемента + вибирає наступного сусіда.
  • Загальний селектор сусідів ~ вибирає відповідних сусідів, які йдуть після.
  • Селектори атрибутів вибирають елементи за HTML-атрибутами.
  • Універсальний селектор * вибирає всі елементи.

Пов'язані уроки

  • Синтаксис CSS і базові селектори
  • Специфічність, каскад і наслідування в CSS
  • CSS display і позиціонування