Селекторы CSS
Поиск (или выбор) HTML-элементов, которые вы хотите стилизовать, — это задача селекторов CSS.
Они делятся на пять групп:
- Простые селекторы выбирают элементы по имени, id или классу.
- Комбинаторные селекторы учитывают отношения между элементами.
- Селекторы псевдоклассов зависят от определённого состояния.
- Селекторы псевдоэлементов стилизуют только часть элемента.
- Селекторы атрибутов проверяют наличие атрибута или его значение.
Эта страница посвящена самым основным селекторам CSS.
Селектор элемента CSS
Селектору элемента для выбора HTML-элементов достаточно имени тега.
Пример
Каждый элемент <p> на этой странице получает красный текст, выровненный по центру.
<style>.
Выберите все элементы <p> по имени и сделайте их выровненными по центру с красным текстом. Включите несколько абзацев.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS element Selector</title>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Селектор id CSS
Чтобы обратиться к одному конкретному элементу, селектор id использует атрибут id этого элемента.
Поскольку id уникален на странице, выбирается только один элемент.
Сам селектор — это решётка (#), а затем id.
Примечание: Id, записанный после решётки, не может начинаться с цифры.
Пример
Это правило получает элемент с id="para1".
<style>.
Стилизуйте только элемент с id="para1", используя #para1, сделав его выровненным по центру с красным текстом. Включите один абзац с этим id и несколько других абзацев без него, чтобы менялся только нужный элемент.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS id Selector</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Селектор класса CSS
Элементы с определённым атрибутом class выбирает селектор класса.
Сам селектор — это точка (.), а затем имя класса.
Класс также можно ограничить одним типом элемента, а один элемент может использовать несколько классов.
Примечание: Имя, записанное после точки, не может начинаться с цифры.
Все элементы с классом
Всё, что имеет класс center, становится красным и выравнивается по центру.
<style>.
Используйте .center, чтобы все элементы с class="center" были выровнены по центру с красным текстом. Примените класс к заголовку и абзацу, чтобы показать, что он работает для разных типов элементов.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Класс на одном типе элемента
Класс center действует только на элементы <p>, делая их красными и выровненными по центру.
<style>.
Используйте p.center, чтобы только элементы <p> с class="center" были выровнены по центру с красным текстом. Включите заголовок с class="center" (который НЕ должен измениться) и абзац с class="center" (который должен измениться).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS class Selector on Paragraphs</title>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Более одного класса
Два класса, center и large, одновременно стилизуют этот абзац.
<style>.
Определите класс .center (красный текст, выровненный по центру) и класс .large (крупный размер шрифта). Добавьте абзац с class="center large", чтобы к нему применялись оба правила.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple CSS Classes</title>
<style>
.center {
text-align: center;
color: red;
}
.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading is red and center-aligned</h1>
<p class="center large">This paragraph refers to two classes.</p>
</body>
</html>