Селектор класса CSS — это способ выбора элементов на странице, используя их классы. Классы позволяют определить группы элементов, которые имеют общие стили.
Селектор класса начинается с точки (.
) и содержит имя класса. Несколько классов могут быть назначены одному элементу, просто разделяя классы пробелами.
Пример использования селектора класса в HTML:
<div class="button primary">Click me</div>
здесь элемент <div>
имеет два класса .button
и .primary
.
Пример использования CSS для задания стилей для элемента с определенным классом:
.button {
border: 1px solid #333;
background-color: #fff;
color: #333;
padding: 10px 20px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.primary {
background-color: #007bff;
color: #fff;
}
здесь сначала определяются стили для всех элементов с классом .button
, а затем дополнительные стили добавляются для элементов с классом .primary
.
С помощью селектора класса можно легко повторно использовать стили для нескольких элементов на странице, что делает HTML-код более чистым и поддерживаемым. Кроме того, использование классов можно комбинировать с другими селекторами, чтобы создавать более специфические стили для определенных групп элементов.