Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут class?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Атрибут **`class`** використовується, щоб присвоїти елементу одне або кілька імен класів, за якими можна застосовувати стилі в CSS, звертатися до елементів із JavaScript і групувати схожі елементи для єдиних дій чи оформлення. **Ключове:** `class` - це мітка для групи елементів, потрібна, щоб однаково стилізувати, знаходити і керувати декількома елементами одразу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `class` використовується, щоб присвоїти елементу **одне або кілька імен класів**, за якими можна: - застосовувати стилі в **CSS**, - звертатися до елементів із **JavaScript**, - групувати схожі елементи для єдиних дій чи оформлення. --- ### 1. Основне призначення `class` дозволяє **об'єднувати елементи в логічні групи** і застосовувати до них спільні властивості. Приклад: ```html <p class="note">Це важливе зауваження.</p> <p class="note">Ще одне зауваження.</p> ``` Тепер до обох елементів можна застосувати однаковий стиль. --- ### 2. Використання в CSS Щоб задати стиль класу, перед іменем ставлять крапку `.`: ```css .note { color: darkblue; font-style: italic; } ``` Усі елементи з `class="note"` будуть оформлені однаково. --- ### 3. Кілька класів в одного елемента Можна присвоїти **кілька класів**, розділивши їх пробілом: ```html <p class="note warning">Будьте уважні!</p> ``` У цьому разі до елемента застосуються **всі** стилі: ```css .note { font-style: italic; } .warning { color: red; } ``` --- ### 4. Використання в JavaScript JavaScript дозволяє знаходити і змінювати елементи за іменем класу: ```html <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` - це **мітка для групи елементів**. Вона потрібна, щоб однаково стилізувати, знаходити і керувати декількома елементами одразу.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.