Базові селектори CSS

Щоб застосувати стилі, потрібно вказати CSS, до яких HTML-елементів їх застосовувати. Це здійснюється за допомогою селекторів. У цьому розділі розглядаються три найважливіші селектори: селектор тегу, селектор класу та селектор id.

Селектор тегу

Селектор тегу застосовується до всіх елементів певного HTML-тегу.
Приклад HTML:

<p>It was all in my head.</p>

Приклад CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Це правило застосовується до кожного елемента <p> на сторінці.

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

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

Селектор класу застосовується до елементів, які мають однакове ім'я класу.
HTML:

<p class="text">This song is another hit.</p>

У CSS для визначення стилів використовується назва класу з крапкою (.):

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Тільки елементи з class="text" отримують ці стилі.

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

Кілька класів

Елемент може мати більше одного класу.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Якщо елемент має обидва класи, він отримує стилі від обох селекторів.

Це робить стилізацію на основі класів потужною.

Елемент <p> з класами text і font отримує стилі від обох селекторів. Клас text встановлює колір navy, а клас font встановлює розмір шрифту 24px.

Селектор ID

Селектор ID призначений для вибору одного унікального елемента.

У HTML додайте атрибут id до елемента:

<p id="title">Choose from different themes.</p>

У CSS звертайтеся до ID за допомогою хештега (#), щоб визначити стилі:

#title {
  font-weight: 500;
  font-size: 20px;
}

ID повинні бути унікальними на сторінці.

Хоча ID можна використовувати для стилізації, зазвичай віддають перевагу класам для послідовності та повторного використання.