Клас - 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 за селектори на класове.
Научете повече за семантичните имена на класове.
Научете повече за конкретността.
Научете за разликата между класове и идентификатори.
Научете за множество селектори на класове и комбинации от селектори на клас / ID.
Научете за API .classList.
Научете за манипулирането на класа в jQuery.