Селекторы CSS
=============

* Назад
* Обзор: Building blocks
* Далее

В CSS-селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

| Необходимые знания: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). |
| --- | --- |
| Цель: | Узнать, как работают CSS-селекторы. |

Что такое селекторы?
--------------------

Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

![Some code with the h1 highlighted.](/ru/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент `h1` или класс `.special`.

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов
--------------------

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в *лист селекторов*: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка `h1` и класса `.special`; я могу написать их так:


```css
h1 {
  color: blue;
}

.special {
  color: blue;
}
```


А могу написать короче — просто отделив селекторы запятыми:


```css
h1, .special {
  color: blue;
}
```


Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:


```css
h1,
.special {
  color: blue;
}
```


В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как `h1` будет стилизован.


```css
h1 {
  color: blue;
}

..special {
  color: blue;
}
```


Но если мы объединим селекторы, правило не применится ни к `h1`, ни к классу: оно считается недействительным.


```css
h1,
..special {
  color: blue;
}
```

Типы селекторов
---------------

Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.

### Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как `<h1>`.


```css
h1 {
}
```


К группе относятся и селекторы классов:


```css
.box {
}
```


или селекторы идентификаторов (ID):


```css
#unique {
}
```

### Селекторы атрибутов

Эта группа селекторов позволяет выбирать селекторы, основываясь на *наличии* у них конкретного атрибута элемента:


```css
a[title] {
}
```


или основываясь на *значении* атрибута:


```css
a[href="https://example.com"]
{
}
```

### Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс `:hover`, например, применяет правило, только если на элемент наведён курсор мыши


```css
a:hover {
}
```


К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, `::first-line` всегда выбирает первую строку внутри элемента (абзаца `<p>` в нашем случае), действуя, как если бы тег `<span>` оборачивал первую строку, а затем был стилизован.


```css
p::first-line {
}
```

### Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент `<article>` с помощью комбинатора дочерних элементов (`>`):


```css
article > p {
}
```

Продолжение
-----------

Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.

* Назад
* Обзор: Building blocks
* Далее
Справка о селекторах
--------------------

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

| Селектор | Пример | Руководство |
| --- | --- | --- |
| Селектор по типу | `h1 { }` | Селектор по типу |
| Универсальный селектор | `* { }` | Универсальный селектор |
| Селектор класса | `.box { }` | Селекторы классов |
| Селектор ID | `#unique { }` | Селекторы по ID |
| Селектор атрибутов | `a[title] { }` | Селекторы атрибутов |
| Селектор псевдоклассов | `p:first-child { }` | Псевдоклассы |
| Селектор псевдоэлементов | `p::first-line { }` | Псевдоэлементы |
| Селектор потомков | `article p` | Селектор потомков |
| Селектор дочерних элементов | `article > p` | Селектор дочерних элементов |
| Смежные селекторы | `h1 + p` | Смежные селекторы |
| Селектор братских элементов | `h1 ~ p` | Селектор братских элементов |