Глобальный атрибут class

Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName. Разработчики постоянно используют атрибут class. Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.

Пример 1

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>
<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

Одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

Пример 2

<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>

Пример 3

.highlighted-text {
background-color: yellow;
font-size: 18px;
}</pre>
<span class="highlighted-text">Этот текст будет выделен.</span>

Пример 4

const elements = document.querySelectorAll('.clickable');
elements.forEach(element => {
element.addEventListener('click', () => {
alert('Клик!');
});
});

<button class="click">Далее</button>

Сложные селекторы в CSS: в некоторых случаях нам нужно применить класс только к определенному HTML-тегу, игнорируя все другие.

Пример 5

/* Только для элементов <p> с классом special-text */
p.special-text {
color: blue;
}

<p class="special-text">Этот текст будет синим.</p>
<div class="special-text">А этот останется без изменений.</div>

 

class css html селекторы