path: root/files/ru/learn/css/building_blocks/selectors/index.html

---
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>&lt;h1&gt;</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>&lt;p&gt;</code> в нашем случае), действуя, как если бы тег <code>&lt;span&gt;</code> оборачивал первую строку, а затем был стилизован.</p>

<pre class="brush: css notranslate">p::first-line { }</pre>

<h3 id="Комбинаторы">Комбинаторы</h3>

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

<pre class="brush: css notranslate">article &gt; 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 &gt; 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>