---
id: 63ee35240d8d4841c3a7091b
videoId: LGQuIIv2RVA
title: Основи CSS. Запитання B
challengeType: 15
dashedName: css-foundations-question-b
---

# --description--

Селектори класу обирають всі елементи з наданим `class`, що є звичайним атрибутом, розміщеним в елементі HTML. Ось так ви додаєте клас до тегу HTML та обираєте його в CSS:

```html
<!-- index.html -->

<div class="alert-text">
  Please agree to our terms of service.
</div>
```

```css
/* styles.css */

.alert-text {
  color: red;
}
```

Примітка щодо синтаксису для селекторів `class`: після крапки пишеться значення атрибуту класу, яке чутливе до регістру. Класи не повинні бути унікальними, тому ви можете використовувати однаковий `class` для декількох елементів.

Завдяки атрибуту `class` також можна додати декілька класів до одного елемента, розділивши їх пробілом, як-от `class="alert-text severe-alert"`. Оскільки пробіл використовують, щоб розділити назви `class`, не використовуйте пробіли у назвах з декількома словами (натомість використовуйте дефіси).

## Селектори ID
Селектори ID схожі до селекторів `class`. Вони обирають елемент з наданим `id`, що є ще одним атрибутом елемента HTML:

```html
<!-- index.html -->

<div id="title">My Awesome 90's Page</div>
```

```css
/* styles.css */

#title {
  background-color: red;
}
```

Замість коми потрібно використовувати знак решітки, після якого пишеться значення атрибута `id`, чутливе до регістру. Загальною помилкою є те, що люди часто використовують атрибут `id` там, де немає потреби і можна було використати класи. Хоча є випадки, коли логічніше використовувати `id` (наприклад, щоб використати переваги специфічності чи перенаправити до розділу поточної сторінки).

Головною відмінністю між класами та ID є те, що елемент може мати лише один `id`. `id` не може повторюватись на сторінці, а атрибут `id` не повинен містити пробілів.

# --question--

## --text--

Який синтаксис для селекторів класу та ID?

## --answers--

Щоб обрати `class`, використовуйте `$`; щоб обрати `id`, використовуйте `#`

---

Щоб обрати `class`, використовуйте `.`; щоб обрати `id`, використовуйте `*`

---

Щоб обрати `class`, використовуйте `.`; щоб обрати `id`, використовуйте `#`


## --video-solution--

3
