Клас - CSS-хитрощі | Альманах CSS 2025

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

.class ( )

Селектор класу виділяє всі елементи з відповідним атрибутом класу.

Наприклад, цей елемент:

Push Me

вибрано та оформлено так:

.big-button ( font-size: 60px; )

Ви можете дати класу будь-яку назву, яка починається з літери, дефіса (-) або підкреслення (_). Ви можете використовувати цифри в назвах класів, але число не може бути першим символом або другим символом після дефіса. Якщо ви не зійшли з розуму і не почали рятуватися від селекторів, що може стати дивним:

.\3A \`\( ( /* matches elements with class=":`(" */ )

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


 This paragraph will get styles from .intro and .blue selectors.

Елемент із декількома класами стилізований з правилами CSS для кожного класу. Ви також можете об'єднати кілька класів для вибору елементів:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Ця демонстрація показує, чим однокласні селектори відрізняються від комбінованих селекторів:

Ви також можете обмежити селектор класу певним видом елемента, який іноді називають "тегом, що відповідає":

ul.menu ( list-style: none; )

Специфічність

Сам по собі селектор класу має значення специфічності 0, 0, 1, 0. Це "потужніше", ніж селектор елемента (наприклад:), a ( )але менш потужне, ніж селектор ID (наприклад #header ( )). Специфічність збільшується, коли ви комбінуєте селектори класу або обмежуєте селектор певним елементом.

Доступ до класів за допомогою JavaScript

Ви можете читати та маніпулювати класами елемента classListв JavaScript. Наприклад, додавання класу може бути таким:

document.getElementById('italicize').classList.add('italic');

Ця демонстрація показує основні приклади classListвикористання:

JQuery також має методи для взаємодії з класами, в тому числі .addClass(), .removeClass(), .toggleClass(), і .hasClass().

Більше інформації

Прочитайте специфікацію W3C для селекторів класів.
Дізнайтеся більше про семантичні назви класів.
Дізнайтеся більше про специфіку.
Дізнайтеся про різницю між класами та ідентифікаторами.
Дізнайтеся про кілька селекторів класів та комбінації селекторів класу / ідентифікатора.
Дізнайтеся про API .classList.
Дізнайтеся про маніпуляції класами в jQuery.