Що робить атрибут class?
Атрибут class використовується, щоб присвоїти елементу одне або кілька імен класів, за якими можна:
- застосовувати стилі в CSS,
- звертатися до елементів із JavaScript,
- групувати схожі елементи для єдиних дій чи оформлення.
1. Основне призначення
class дозволяє об'єднувати елементи в логічні групи і застосовувати до них спільні властивості.
Приклад:
<p class="note">Це важливе зауваження.</p>
<p class="note">Ще одне зауваження.</p>Тепер до обох елементів можна застосувати однаковий стиль.
2. Використання в CSS
Щоб задати стиль класу, перед іменем ставлять крапку .:
.note {
color: darkblue;
font-style: italic;
}Усі елементи з class="note" будуть оформлені однаково.
3. Кілька класів в одного елемента
Можна присвоїти кілька класів, розділивши їх пробілом:
<p class="note warning">Будьте уважні!</p>У цьому разі до елемента застосуються всі стилі:
.note { font-style: italic; }
.warning { color: red; }4. Використання в JavaScript
JavaScript дозволяє знаходити і змінювати елементи за іменем класу:
<p class="highlight">Текст</p>
<script>
const elements = document.getElementsByClassName("highlight");
elements[0].style.background = "yellow";
</script>Так можна змінити оформлення всіх елементів певного класу.
5. Відмінність від id
| Властивість | id | class |
|---|---|---|
| Унікальність | Лише один елемент із таким іменем | Може бути в багатьох елементів |
| Селектор у CSS | #header | .header |
| Використання | Для точкового налаштування | Для групування і масового оформлення |
Підсумок:
| Характеристика | Опис |
|---|---|
| Призначення | Об'єднує елементи в групи |
| Де використовується | У CSS і JavaScript |
| Синтаксис | class="ім'я" |
| Чи можна вказати кілька | Так, через пробіл |
Відмінність від id | Не унікальний, можна застосовувати до безлічі елементів |
Простими словами:
class - це мітка для групи елементів.
Вона потрібна, щоб однаково стилізувати, знаходити і керувати декількома елементами одразу.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.