Темная тема
Основные типы селекторов
Что такое селекторы?
Селекторы - это способ найти элементы на странице и применить к ним стили.
Селектор элемента
Селектор элемента - все элементы этого типа (<p>, <div> и другие).
Например. Изменим файл index.html:
html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Пример</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</body>
</html>Изменим файл styles.css:
css
p {
color: blue;
}Селектор класса
Селектор класса - все элементы с заданным классом (.className).
Например. Изменим файл index.html:
html
<body>
<h1 class="orange-back">Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p class="orange-back">Параграф 3</p>
</body>Изменим файл styles.css:
css
.orange-back {
background: orange;
}Селектор идентификатора
Селектор идентификатора - элемент с уникальным id (#idName).
Например. Изменим файл index.html:
html
<body>
<h1>Заголовок</h1>
<p id="green-text">Параграф 1</p>
<p id="red-text">Параграф 2</p>
<p>Параграф 3</p>
</body>Изменим файл styles.css:
css
#green-text {
color: green;
}
#red-text {
color: red;
}Универсальный
Универсальный - все элементы (*).
Например. Изменим файл index.html:
html
<body>
<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</body>Изменим файл styles.css:
css
* {
color: blueviolet;
}Группировка селекторов
Например. Изменим файл index.html:
html
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
</body>Изменим файл styles.css:
css
h1,
h2 {
background: #a8b1ff;
}