Селектори

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

Селектор елемента (тегу)

Описує, до якого типу елементів буде застосоване CSS-правило. Селектор елемента недостатньо специфічний для того, щоб стилізувати окремі елементи, тому найчастіше застосовується для оформлення всіх тегів одного типу на сторінці. Наприклад, якщо у всіх посилань в документі потрібно прибрати підкреслення.

/* Застосується до всіх абзаців на сторінці */
p {
  font-size: 24px;
}

/* Застосується до всіх посилань на сторінці */
a {
  text-decoration: none;
}

Селектор класу

Основний селектор в сучасній розробці. Використовується разом із глобальним атрибутом class. Ім'я класу задається тільки англійською мовою, і це обов'язково іменник, що описує цей елемент. Для поповнення словникового запасу використовуйте довідник, словник термінів і скорочення.

<h1 class="title">Привіт, я Mango.</h1>
<p class="text">
  Ласкаво просимо на мою особисту сторінку. Тут можна подивитися
  <a class="link" href="">проекти</a>.
</p>

В CSS використовується селектор класу, щоб задати стилі для одного і більше елементів з однаковим значенням атрибута class (ім'ям класу). У селекторі, перед ім'ям класу ставиться крапка ..

/* Застосується до всіх тегів з класом title */
.title {
  font-weight: 500;
}

/* Застосується до всіх тегів з класом text */
.text {
  color: brown;
  font-size: 18px;
}

/* Застосується до всіх тегів з класом link */
.link {
  text-decoration: none;
}

Увага

В імені класу використовуються тільки маленькі літери і тире. Наприклад, list, list-item, logo-image тощо. Підкреслення list_item, великі літери ListItem або цифри listitem27 вважаються поганим тоном.

Композиція класів

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

<element class="value1 value2 value3"></element>

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

<p class="alert success">Поповнення рахунку виконано</p>
<p class="alert warning">Увага, будуть змінені тарифи</p>
<p class="alert error">Помилка проведення транзакції</p>

У стилях описуємо кілька правил: загальних для всіх повідомлень і специфічних для кожного типу.

/* Загальні стилі для всіх типів повідомлень */
.alert {
  font-size: 24px;
  font-weight: 500;
}

/* Специфічні стилі для кожного типу */
.success {
  color: green;
}

.warning {
  color: orange;
}

.error {
  color: red;
}

Ось робочий приклад.

Селектор ідентифікатора

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

<h1 id="title">Заголовок сторінки</h1>

В CSS-селекторі перед ім'ям ідентифікатора ставиться символ решітки #.

#title {
  font-weight: 500;
  color: orange;
}

Корисно

Не використовуйте ідентифікатори для оформлення. Правило унікальності значення робить повторне використання стилів неможливим. Ідентифікатори призначені для «якорів».

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

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

<a href="">Читайте наш блог!</a>

<ul class="social-links">
  <li>
    <a href="">Twitter</a>
  </li>
  <li>
    <a href="">Instagram</a>
  </li>
  <li>
    <a href="">Facebook</a>
  </li>
</ul>

Наприклад, замість того, щоб задавати стиль усім посиланням, потрібно змінити стилі тільки тих, які знаходяться всередині списку з класом social-links.

/* ❌ Застосується до всіх посилань у документі */
a {
  color: blue;
  text-decoration: none;
}

/* ✅ Застосується тільки до посилань, які лежать всередині тегу з класом social-links */
.social-links a {
  color: blue;
  text-decoration: none;
}

Селектор дитини

Ще один поширений селектор, який дозволяє вибрати тільки безпосередню дитину всередині батьківського елементу. Використовуємо розмітку для багаторівневого меню магазину, в якому необхідно стилізувати теги <li> у списку з класом menu, але не submenu.

<ul class="menu">
  <li>
    Комп'ютери та комплектуючі
    <ul class="submenu">
      <li>Процесори</li>
      <li>Монітори</li>
      <li>Відеокарти</li>
    </ul>
  </li>
  <li>
    Побутова техніка
    <ul class="submenu">
      <li>Холодильники</li>
      <li>Телевізори</li>
      <li>Пральні машини</li>
    </ul>
  </li>
  <li>
    Товари для дому
    <ul class="submenu">
      <li>Крісла</li>
      <li>Матраци</li>
      <li>Електрокаміни</li>
    </ul>
  </li>
</ul>

Якщо використовувати селектор нащадка (контекстний), то CSS-правило застосується до всіх тегів <li>, і червона рамка буде у кожного.

/* ❌ Не вирішує завдання */
.menu li {
  border: 1px solid tomato;
}

Селектор дитини допомагає вирішити цю проблему, вибравши тільки ті <li>, які є дітьми (перша вкладеність) списку ul.menu.

/* ✅ Те, що потрібно */
.menu > li {
  border: 1px solid tomato;
}

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

Дозволяє застосувати стилі до елементів з певним атрибутом або його значенням.

елемент[атрибут]

Застосує стилі до всіх елементів, у яких є вказаний атрибут.

<a href="https://htmlreference.io" title="Довідник тегів"> htmlreference.io </a>

<a href="https://cssreference.io" title="Довідник стилів"> cssreference.io </a>

<a href="https://www.youtube.com">YouTube </a>

Вибере всі посилання з атрибутом title.

a[title] {
  color: teal;
}

елемент[атрибут="значення"]

Застосує стилі до всіх елементів у яких є атрибут з вказаним значенням.

<a href="https://htmlreference.io" title="Довідник тегів"> htmlreference.io </a>

<a href="https://cssreference.io" title="Довідник стилів"> cssreference.io </a>

<a href="https://www.youtube.com">YouTube</a>

Вибере всі посилання з атрибутом href і відповідним значенням.

/* Незвичне форматування фігурних дужок - це нормально */
a[href="https://htmlreference.io"]
{
  color: teal;
}

a[href="https://cssreference.io"]
{
  color: orange;
}

a[href="https://www.youtube.com"]
{
  color: tomato;
}