---
title: Псевдоклассы, псевдоэлементы
slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
tags:
  - CSS
  - Начинающий
  - Обучение
  - Псевдо
  - Псевдоэлемент
  - Селекторы
  - псевдокласс
translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<p>Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые условия:</th>
   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Узнать о селекторах псевдокласса и псевдоэлемента.</td>
  </tr>
 </tbody>
</table>

<h2 id="Что_такое_псевдокласс">Что такое псевдокласс?</h2>

<p>Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.</p>

<p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p>

<pre>:<em>pseudo-class-name</em></pre>

<h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3>

<p>Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>

<p>Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>

<p>Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:</p>

<ul>
 <li><code><a href="/ru/docs/Web/CSS/:last-child">:last-child</a></code></li>
 <li><code><a href="/ru/docs/Web/CSS/:only-child">:only-child</a></code></li>
 <li><code><a href="/ru/docs/Web/CSS/:invalid">:invalid</a></code></li>
</ul>

<div class="blockIndicator note">
<p><strong>Примечание</strong> : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать <code>:first-child</code> и правило было бы применено к <em>любому</em> элементу, оказавшемуся первым дочерним для <code>&lt;article&gt;</code>, не только к первому дочернему абзацу — <code>:first-child</code> равнозначно <code>*:first-child</code>. Однако обычно вы хотите б<em>о</em>льшего контроля, поэтому вам нужен более специфичный селектор.</p>
</div>

<h3 id="Псевдоклассы_пользовательского_действия">Псевдоклассы пользовательского действия</h3>

<p>Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:</p>

<ul>
 <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.</li>
 <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.</li>
</ul>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>

<h2 id="Что_такое_псевдоэлемент">Что такое псевдоэлемент?</h2>

<p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p>

<pre><em>::pseudo-element-name</em></pre>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p>
</div>

<p>Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в <code>&lt;span&gt;</code> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.</p>

<p>Селектор псевдоэлемента <code>::first-line</code> сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>

<p>Он действует так, как если бы <code>&lt;span&gt;</code> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.</p>

<p>Вы можете видеть, что селектор выбирает первую строку обоих абзацев.</p>

<h2 id="Объединение_псевдоклассов_и_псевдоэлементов">Объединение псевдоклассов и псевдоэлементов</h2>

<p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code>&lt;p&gt;,</code> который находится внутри элемента <code>&lt;article&gt;</code>.</p>

<pre class="brush: css"><code>article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}</code></pre>

<h2 id="Генерация_контента_с_помощью_before_и_after">Генерация контента с помощью ::before и ::after</h2>

<p>Существует пара специальных псевдоэлементов, которые используются вместе со свойством <code><a href="/en-US/docs/Web/CSS/content">content</a></code> для вставки содержимого в документ с помощью CSS.</p>

<p>Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент <code>::before</code> на <code>::after</code> и увидите, что текст вставлен в конце элемента, а не в начале.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>

<p>Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых <span class="extended-text__full">экранных диктор</span>ов и его будет трудно найти и отредактировать в будущем.</p>

<p>Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью <span class="extended-text__full">экранного диктор</span>а:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>

<p>Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.</p>

<p>В следующем примере мы добавили пустую строку, используя псевдоэлемент <code>::before.</code> Мы установили <code>display: block</code>, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>

<p>Использование псевдоэлементов <code>::before</code> и <code>::after</code> вместе со свойством <code>content</code> в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..</p>

<h2 id="Справочный_раздел">Справочный раздел</h2>

<p>Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.</p>

<h3 id="Псевдоклассы">Псевдоклассы</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Селектор</th>
   <th scope="col">Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ Cssxref(":active") }}</td>
   <td>Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":any-link") }}</td>
   <td>Соответствует как состоянию <code>:link,</code> так и состоянию<code>:visited</code> ссылки.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":blank") }}</td>
   <td>Соответствует <a href="/ru/docs/Web/HTML/Element/Input">элементу <code>&lt;input&gt;</code></a>, для которого значение ввода является пустым.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":checked") }}</td>
   <td>Соответствует переключателю или флажку в выбранном состоянии.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":current") }}</td>
   <td>Соответствует элементу или предку элемента, который в данный момент отображается.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":default") }}</td>
   <td>Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (<em>обрабатывают нажатие клавиши enter</em>) в наборе сходных элементов.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":dir") }}</td>
   <td>Выбирает элемент на основе его направленности (значение атрибута HTML <code><a href="/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code> или свойства CSS <code><a href="/ru/docs/Web/CSS/direction">direction</a></code> ).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":disabled") }}</td>
   <td>Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":empty") }}</td>
   <td>Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":enabled") }}</td>
   <td>Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first") }}</td>
   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует первой странице.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first-child") }}</td>
   <td>Соответствует элементу, который является первым среди других дочерних элементов одного предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first-of-type") }}</td>
   <td>Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus") }}</td>
   <td>Соответствует элементу, имеющему фокус.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus-visible")}}</td>
   <td>Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus-within") }}</td>
   <td>Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":future") }}</td>
   <td>Соответствует элементам после текущего элемента.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":hover") }}</td>
   <td>Соответствует элементу, на который наведён курсор мыши.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":indeterminate") }}</td>
   <td>Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно <a href="/ru/docs/Web/HTML/Element/Input/checkbox">checkboxes</a>.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":in-range") }}</td>
   <td>Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":invalid") }}</td>
   <td>Соответствует элементу, например <code>&lt;input&gt;</code>, в недопустимом состоянии.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":lang") }}</td>
   <td>Соответствует элементу, основанному на языке (значение атрибута HTML <a href="/ru/docs/Web/HTML/Global_attributes/lang">lang</a>).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":last-child") }}</td>
   <td>Соответствует элементу, который является последним среди других дочерних элементов одного предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":last-of-type") }}</td>
   <td>Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":left") }}</td>
   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует левосторонним страницам.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":link")}}</td>
   <td>Соответствует непосещавшимся ссылкам.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":local-link")}}</td>
   <td>Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":is", ":is()")}}</td>
   <td>Соответствует любому селектору из полученного списка селекторов.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":not") }}</td>
   <td>Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-child") }}</td>
   <td>Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-of-type") }}</td>
   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы &lt;p&gt;) — дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-last-child") }}</td>
   <td>Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-last-of-type") }}</td>
   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы &lt;p&gt;), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":only-child") }}</td>
   <td>Соответствует элементу, являющемуся единственным дочерним для своего предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":only-of-type") }}</td>
   <td>Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":optional") }}</td>
   <td>Соответствует необязательным элементам формы.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":out-of-range") }}</td>
   <td>Соответствует элементу с диапазоном, когда его значение находится вне диапазона.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":past") }}</td>
   <td>Соответствует элементам перед текущим элементом.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":placeholder-shown") }}</td>
   <td>Соответствует элементу input, который показывает текст-заполнитель.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":playing") }}</td>
   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":paused") }}</td>
   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":read-only") }}</td>
   <td>Соответствует элементу, который не может быть изменён пользователем.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":read-write") }}</td>
   <td>Соответствует элементу, который может быть изменён пользователем.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":required") }}</td>
   <td>Соответствует обязательным элементам формы.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":right") }}</td>
   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует правосторонним страницам.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":root") }}</td>
   <td>Соответствует элементу, который является корнем документа.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":scope") }}</td>
   <td>Соответствует любому элементу, который является элементом области видимости.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":valid") }}</td>
   <td>Соответствует элементу, такому как &lt;input&gt;, в допустимом состоянии.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":target") }}</td>
   <td>Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":visited") }}</td>
   <td>Соответствует посещённым ссылкам.</td>
  </tr>
 </tbody>
</table>

<h3 id="Псевдоэлементы">Псевдоэлементы</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Селектор</th>
   <th scope="col">Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ Cssxref("::after") }}</td>
   <td>Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::before") }}</td>
   <td>Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::first-letter") }}</td>
   <td>Соответствует первой букве элемента.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::first-line") }}</td>
   <td>Соответствует первой строке содержимого порождающего элемента.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::grammar-error") }}</td>
   <td>
    <p>Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.</p>
   </td>
  </tr>
  <tr>
   <td>{{ Cssxref("::marker") }}</td>
   <td>Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.</td>
  </tr>
  <tr>
   <td>
    <p>{{ Cssxref("::selection") }}</p>
   </td>
   <td>Соответствует части документа, которая была выбрана.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::spelling-error") }}</td>
   <td>
    <p>Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<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/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
  <ul>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
  </ul>
 </li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</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">Значения и единицы измерения</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><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
</ol>