Основні селектори в CSS

1. Селектори за типом (Type Selectors)

Селектори в CSS дозволяють обирати HTML-елементи і застосовувати до них стилі. Знання основних селекторів допомагає ефективно і точно обирати елементи на сторінці, що робить CSS потужним інструментом для стилізації веб-контенту. У цій статті розглянемо основні типи селекторів: селектори за типом (Type Selectors), селектори за класом, селектори за ідентифікатором, групові та універсальні селектори.

Селектори за типом обирають усі елементи певного тега. Наприклад, якщо нам потрібно застосувати стилі до всіх абзаців на сторінці, ми використовуємо селектор за типом із тегом <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Цей текст буде синім і розміром 16 пікселів.</p>
<p>Другий абзац із такими ж стилями.</p>

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

2. Селектори за класом (Class Selectors)

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

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Цей текст виділений синім кольором на жовтому фоні.</p>
<p>Звичайний текст без класу.</p>
<div class="highlight">Цей блок також буде виділений стилями класу highlight.</div>

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

3. Селектори за ідентифікатором (ID Selectors)

Селектори за ідентифікатором обирають елементи з певним значенням атрибута id. Ідентифікатор позначається символом # перед ім’ям. На відміну від класів, ID має бути унікальним на сторінці, що робить його ідеальним для стилізації унікальних елементів, таких як заголовок або навігаційна панель.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Заголовок сторінки</h1>
<p>Цей абзац не буде зачеплений селектором за ідентифікатором.</p>

Селектори за ідентифікатором застосовують стиль тільки до одного елемента на сторінці, тому їх використовують для виділення унікальних елементів за допомогою специфічних стилів.

4. Групові селектори (Group Selectors)

Групові селектори дозволяють застосовувати однакові стилі одразу до кількох елементів. Це робиться за допомогою коми, яка об'єднує кілька селекторів у одне правило CSS. Групові селектори спрощують код, оскільки дозволяють задати спільні стилі для кількох типів елементів.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Заголовок першого рівня</h1>
<h2>Заголовок другого рівня</h2>
<h3>Заголовок третього рівня</h3>
<p>Цей текст не буде зачеплений груповим селектором.</p>

Групові селектори допомагають скоротити CSS-код і спростити стилізацію, особливо коли потрібно застосувати однакові властивості до різних елементів, наприклад, до заголовків різних рівнів.

5. Універсальні селектори (Universal Selectors)

Універсальний селектор позначається зірочкою (*) і обирає всі елементи на сторінці. Це потужний інструмент, який дозволяє швидко задати базові стилі для всіх елементів, наприклад, встановити однакові відступи або задати стандартний шрифт. Універсальний селектор корисний для скидання стилів (reset), коли потрібно прибрати стандартні відступи і поля браузера для більш точного управління стилями.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Заголовок</h1>
<p>Абзац тексту з нульовими відступами і полями.</p>
<div>Контейнер з нульовими відступами і полями.</div>

У цьому прикладі універсальний селектор скидає відступи і поля для всіх елементів, що допомагає зберегти консистентність стилів на сторінці. Цей прийом часто використовується на початку CSS-коду для створення єдиної стилізації.