---
title: Селекторы CSS
slug: Learn/CSS/Building_blocks/Selectors
tags:
- Attribute
- Beginner
- CSS
- Learn
- Pseudo-class
- Pseudo-element
- id
- Обучение
- Псевдоэлемент
- псевдокласс
- селектор
translation_of: Learn/CSS/Building_blocks/Selectors
original_slug: Learn/CSS/Building_blocks/Селекторы
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
<p class="summary">В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые знания:</th>
<td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
</tr>
<tr>
<th scope="row">Цель:</th>
<td>Узнать, как работают CSS-селекторы.</td>
</tr>
</tbody>
</table>
<h2 id="Что_такое_селекторы">Что такое селекторы?</h2>
<p>Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p>
<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
<p>Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p>
<p>В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в <a href="https://www.w3.org/TR/selectors-3/">Спецификации селекторов 3 уровня</a>, где вы сможете найти всю информацию о поддержке селекторов в браузерах.</p>
<h2 id="Несколько_селекторов">Несколько селекторов</h2>
<p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p>
<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
.special {
color: blue;
} </code></pre>
<p>А могу написать короче — просто отделив селекторы запятыми:</p>
<pre class="brush: css notranslate"><code>h1, .special {
color: blue;
} </code></pre>
<p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p>
<pre class="brush: css notranslate"><code>h1,
.special {
color: blue;
} </code></pre>
<p>В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
<p>При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.</p>
<p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p>
<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
..special {
color: blue;
} </code></pre>
<p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p>
<pre class="brush: css notranslate"><code>h1, ..special {
color: blue;
} </code></pre>
<h2 id="Типы_селекторов">Типы селекторов</h2>
<p>Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.</p>
<h3 id="Селекторы_тегов_классов_и_идентификаторов">Селекторы тегов, классов и идентификаторов</h3>
<p>К этой группе относятся селекторы HTML-элементов, таких как <code><h1></code>.</p>
<pre class="brush: css notranslate">h1 { }</pre>
<p>К группе относятся и селекторы классов:</p>
<pre class="brush: css notranslate">.box { }</pre>
<p>или селекторы идентификаторов (ID):</p>
<pre class="brush: css notranslate">#unique { }</pre>
<h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3>
<p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p>
<pre class="brush: css notranslate">a[title] { }</pre>
<p>или основываясь на <em>значении</em> атрибута:</p>
<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
<h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3>
<p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p>
<pre class="brush: css notranslate">a:hover { }</pre>
<p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code><p></code> в нашем случае), действуя, как если бы тег <code><span></code> оборачивал первую строку, а затем был стилизован.</p>
<pre class="brush: css notranslate">p::first-line { }</pre>
<h3 id="Комбинаторы">Комбинаторы</h3>
<p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code><article></code> с помощью комбинатора дочерних элементов (<code>></code>):</p>
<pre class="brush: css notranslate">article > p { }</pre>
<h2 id="Продолжение">Продолжение</h2>
<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
<h2 id="Справка_о_селекторах">Справка о селекторах</h2>
<p>В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Селектор</th>
<th scope="col">Пример</th>
<th scope="col">Руководство</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/ru/docs/Web/CSS/Type_selectors">Селектор по типу</a></td>
<td><code>h1 { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_типу">Селектор по типу</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></td>
<td><code>* { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Универсальный_селектор">Универсальный селектор</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Class_selectors">Селектор класса</a></td>
<td><code>.box { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_классов">Селекторы классов</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/ID_selectors">Селектор ID</a></td>
<td><code>#unique { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_ID">Селекторы по ID</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Attribute_selectors">Селектор атрибутов </a></td>
<td><code>a[title] { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Псевдо-классы">Селектор псевдоклассов</a></td>
<td><code>p:first-child { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдокласс">Псевдоклассы</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Pseudo-elements">Селектор псевдоэлементов</a></td>
<td><code>p::first-line { }</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдоэлемент">Псевдоэлементы</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Descendant_combinator">Селектор потомков</a></td>
<td><code>article p</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Селектор_потомков">Селектор потомков</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Child_combinator">Селектор дочерних элементов</a></td>
<td><code>article > p</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Комбинатор">Селектор дочерних элементов</a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/Adjacent_sibling_combinator">Смежные селекторы</a></td>
<td><code>h1 + p</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Смежные_селекторы">Смежные селекторы </a></td>
</tr>
<tr>
<td><a href="/ru/docs/Web/CSS/General_sibling_combinator">Селектор братских элементов</a></td>
<td><code>h1 ~ p</code></td>
<td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Братские_элементы">Селектор братских элементов</a></td>
</tr>
</tbody>
</table>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ol>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы </a>
<ul>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators">Комбинации селекторов </a></li>
</ul>
</li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Изображения, формы и прочие медиа-элементы </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS </a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></li>
</ol>