2.4 KiB
title | localeTitle |
---|---|
Class Selector | Селектор классов |
Селектор классов
Селектор классов используется в CSS-файле для применения стиля к элементам HTML с соответствующим именем класса. В HTML вы можете установить имя класса для любого элемента, добавив атрибут «class».
Чтобы выбрать элементы с определенным классом, мы используем (.), Названный как символ периода, с именем класса.
Например
.center {
text-align: center;
color: red;
}
Здесь все элементы HTML с class="center"
будут красными и центрированными.
Примеры:
<h1 class="test">This is a heading 1</h1>
<p class="test">This is a paragraph 1</p>
<h2 class="test">This is a heading 2</h2>
<p class="test">This is a paragraph 2</p>
<div class="test2 test3">This is a div 1</div>
Так как имя класса не уникально, атрибут класса HTML позволяет определять одинаковые стили для элементов с тем же именем класса. Вот как вы можете выбрать класс в файле CSS для стилей элементов (обратите внимание на нотацию):
Все элементы класса test
будут применены в этом стиле:
.test {
color: green;
}
Все <p>
элементы класса test
будут применяться с этим стилем:
p.test {
border: 1px solid black;
color: red;
}
Все <h1>
и <h2>
Элементы класса test
будут применяться с этим стилем:
h1.test, h2.test {
color: blue;
}
Все элементы, которые имеют как класс test2
и test3
будут применяться в этом стиле:
.test2.test3 {
color: green;
}
Совет: Не ставьте пробелы между несколькими классами
Дополнительная информация:
Синтаксис и селектор CSS: w3schools