Термин "селектор" в контексте CSS происходит от английского слова "select", которое переводится как "выбирать". Селекторы в CSS действуют как фильтры: они "выбирают" определённые [[HTML-элемент|HTML-элементы]] из DOM-дерева веб-страницы для применения к ним стилей.
В CSS много разных селекторов. Каждый отдельный селектор представляет собой один [[Паттерн (Pattern)| паттерн]]. Паттерны можно комбинировать между собой.
Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
### Как сформировать CSS-селектор
Универсальный синтаксис для CSS-селектора, в который можно подставить различные паттерны, выглядит следующим образом:
```css
паттерн {
свойство: значение;
}
```
- `паттерн` - это фильтр, который определяет, к каким элементам на странице будут применяться стили.
- `свойство` - это то, что вы хотите изменить (например, `color`, `font-size` и так далее).
- `значение` - это то, на что вы хотите изменить свойство (например, `red`, `16px` и так далее).
Примеры:
1. Применить стиль ко всем HTML-элементам `<p>`:
```css
p {
color: red;
}
```
2. Применить стиль к HTML-элементам с классом `my-class`:
```css
.my-class {
font-size: 16px;
}
```
3. Применить стиль к элементу с идентификатором (ID) `my-id`:
```css
#my-id {
background-color: blue;
}
```
### Где изучить все паттерны CSS-селекторов
На странице сайта [w3schools.com](https://www.w3schools.com/cssref/css_selectors.php)приведена таблица с паттернами.
Я взял начало таблицы и перевел ее на русский язык, чтобы продемонстрировать как правильно ее читать:
| Селектор | Пример | Описание примера |
| --------------- | ----------- | ------------------------------------------------------------ |
| .class | .intro | Выбирает все элементы с class="intro" |
| .class1.class2 | .name1.name2| Выбирает все элементы, у которых в атрибуте class установлены и _name1_, и _name2_ |
| .class1 .class2 | .name1 .name2| Выбирает все элементы с _name2_, являющиеся потомками элемента с _name1_ |
| \#id | \#firstname | Выбирает элемент с id="firstname" |
| * | * | Выбирает все элементы |
Разберём первую строку таблицы.
Паттерном является `.class`, в качестве примера дается класс `intro`
Если использовать паттерн `.class` и в качестве класса использовать `intro`, то получится вот такой CSS-селектор:
```css
.intro {
color: blue;
}
```
Этот селектор выбирает все HTML-элементы на странице, у которых в атрибуте `class` присутствует значение `intro` и делает текст синим.
Пример того, какие html-элементы подпадают под данный CSS-селектор:
```html
<div class="intro">Это блок с классом intro.</div>
<p class="intro">Это абзац с классом intro.</p>
```