initial commit

6 files changed, 1190 insertions, 0 deletions

diff --git a/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html
new file mode 100644
index 0000000000..9a6a2c4c07
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html
@@ -0,0 +1,160 @@
+---
+title: Селекторы атрибута
+slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
+tags:
+  - CSS
+  - Атрибут
+  - Начинающий
+  - Обучение
+  - Селекторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">В CSS вы можете использовать селекторы атрибута</span></span> <span class="tlid-translation translation" lang="ru"><span title="">для стилизации элементов с определенными атрибутами</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Этот урок покажет вам, как использовать эти очень полезные селекторы.</span></span></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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, что такое селекторы атрибута и как их использовать.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Селекторы_наличия_и_значения"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы наличия и значения</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например,</span></span> <code>href</code>) <span class="tlid-translation translation" lang="ru"><span title="">или на всевозможных разного рода сочетаниях со значением атрибута</span></span>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Пример</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em> (имя которого </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках).</span></span></td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value</em> </span></span> — <span class="tlid-translation translation" lang="ru"><span title="">строке внутри кавычек.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr,</em> значение которого в точности равно <em>value</em> или содержит <em>value</em> в своём (разделённом пробелами) списке значений.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value </em>или начинается с <em>value</em>, за которым сразу следует дефис.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере вы можете увидеть использование этих селекторов.</span></span></p>
+
+<ul>
+ <li>Используя <code>li[class],</code> мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.</li>
+ <li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.</li>
+ <li><code>li[class~="a"]</code> выберет класс <code>a</code>, а также значение, которое содержит класс <code>a</code> как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Селекторы_вхождения_подстроки"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы вхождения подстроки</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута</span></span>. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Пример</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em> (<span class="tlid-translation translation" lang="ru"><span title="">его имя </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках</span></span>), значение которого начинается с <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого заканчивается на <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=<em> </em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого содержит <em>value</em>, независимо от его положения внутри строки.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Отступление: возможно, будет полезным заметить, что <code>^</code> и <code>$</code> давно используются как <em>якоря </em>в так называемых <em>регулярных выражениях</em> и обозначают <em>начинается с </em>и <em>заканчивается на</em>.)</p>
+
+<p>Следующий пример показывает, как используются эти селекторы:</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> выбирает все значения атрибута, которые начинаются с <code>a</code>, что соответствует первым двум элементам списка.</li>
+ <li><code>li[class$="a"]</code> выбирает все значения атрибута, которые заканчиваются на <code>a</code>, что соответствует первому и третьему элементу списка.</li>
+ <li><code>li[class*="a"]</code> выбирает все значения атрибута, где появляется <code>a</code>, независимо от положения в строке, что соответствует всем элементам нашего списка.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Чувствительность_к_регистру">Чувствительность к регистру</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите выбрать значения атрибута без учета регистра</span></span><span class="tlid-translation translation" lang="ru"><span title="">, вы можете использовать значение</span></span> <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. <span class="tlid-translation translation" lang="ru"><span title="">Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа</span></span> — <span class="tlid-translation translation" lang="ru"><span title="">в случае HTML такая чувствительность присутствует</span></span>.</p>
+
+<p>В примере ниже первый селектор выберет значение, начинающееся с <code>a</code> — <span class="tlid-translation translation" lang="ru"><span title="">это соответствует только первому элементу списка</span></span><span class="tlid-translation translation" lang="ru"><span title="">, потому что два других элемента списка начинаются с заглавной буквы A</span></span>. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, <span class="tlid-translation translation" lang="ru"><span title="">которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</span></span></p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о <a href="https://wiki.developer.mozilla.org/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>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/combinators/index.html b/files/ru/learn/css/building_blocks/селекторы/combinators/index.html
new file mode 100644
index 0000000000..7a076e05a8
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/combinators/index.html
@@ -0,0 +1,113 @@
+---
+title: Комбинаторы
+slug: Learn/CSS/Building_blocks/Селекторы/Combinators
+tags:
+  - CSS
+  - Селекторы
+  - комбинаторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое программное обеспечение</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p>
+
+<pre class="brush: css notranslate">body article p</pre>
+
+<p>В приведенном ниже примере выбирается только тот элемент &lt;p&gt;, который находится внутри элемента с классом<code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Дочерний_комбинатор">Дочерний комбинатор</h2>
+
+<p><strong>Дочерний комбинатор</strong> (<code>&gt;</code>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code>&lt;p&gt;</code>, которые являются дочерними элементами <code>&lt;article&gt;</code>, селетор пишется так:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code>&lt;li&gt;</code>, которые являются прямыми потомками <code>&lt;ul&gt;</code>, и присвоить им верхнюю границу красного цвета.</p>
+
+<p>Если вы уберёте символ <code>&gt;</code>, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <code>&lt;li&gt;</code> получат верхнюю границу красного цвета.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Соседний_родственный_комбинатор">Соседний родственный комбинатор</h2>
+
+<p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code>&lt;img&gt;</code> , которые идут сразу после элементов <code>&lt;p&gt;</code> :</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code>&lt;h1&gt;</code>, и стилизуем его.</p>
+
+<p>Если вы вставите какой-то другой элемент, например <code>&lt;h2&gt;</code> между <code>&lt;h1&gt;</code> и <code>&lt;p&gt;</code>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Общий_родственный_комбинатор">Общий родственный комбинатор</h2>
+
+<p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code>&lt;img&gt;</code>, которые находятся в <em>любом</em> месте после элементов <code>&lt;p&gt;</code>, надо указать так:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>В приведенном ниже примере мы выбираем все элементы <code>&lt;p&gt;</code>, которые идут после <code>&lt;h1&gt;</code>, и хотя в документе есть также <code>&lt;div&gt;</code>, тем не менее <code>&lt;p&gt;</code>, который идет после него, будет выбран.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="Использование_комбинаторов">Использование комбинаторов</h2>
+
+<p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code>&lt;ul&gt;</code>, можно использовать следующую комбинацию:</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p>
+
+<p>Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.</p>
+
+<h2 id="Проверьте_ваши_навыки!">Проверьте ваши навыки!</h2>
+
+<p>Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Проверьте ваши навыки: Селекторы</a>.</p>
+
+<h2 id="Двигаемся_дальше">Двигаемся дальше</h2>
+
+<p>Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">CSS модель коробки</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/index.html b/files/ru/learn/css/building_blocks/селекторы/index.html
new file mode 100644
index 0000000000..3819af4207
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/index.html
@@ -0,0 +1,235 @@
+---
+title: Селекторы CSS
+slug: Learn/CSS/Building_blocks/Селекторы
+tags:
+  - Attribute
+  - Beginner
+  - CSS
+  - Learn
+  - Pseudo-class
+  - Pseudo-element
+  - id
+  - Обучение
+  - Псевдоэлемент
+  - псевдокласс
+  - селектор
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<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>
diff --git a/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html
new file mode 100644
index 0000000000..4fe67b8adb
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html
@@ -0,0 +1,415 @@
+---
+title: 'Псевдоклассы, псевдоэлементы'
+slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements
+tags:
+  - CSS
+  - Начинающий
+  - Обучение
+  - Псевдо
+  - Псевдоэлемент
+  - Селекторы
+  - псевдокласс
+translation_of: Learn/CSS/Building_blocks/Selectors/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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 class="notranslate">:<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="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="https://wiki.developer.mozilla.org/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 class="notranslate"><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 notranslate"><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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code> или свойства CSS <code><a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html
new file mode 100644
index 0000000000..875899ab41
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html
@@ -0,0 +1,130 @@
+---
+title: 'Селекторы типа, класса и ID'
+slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors
+tags:
+  - CSS
+  - id
+  - Класс
+  - Начинающий
+  - Обучение
+  - Селекторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.</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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Селекторы_типа">Селекторы типа</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Селектор типа</strong> иногда называется <em>селектором имени тега</em> или <em>селектором элемента</em>, поскольку он выбирает тег/элемент HTML в вашем документе.</span></span> В примере ниже мы использовали селекторы span, em и strong.</p>
+
+<p><strong>Попробуйте добавить CSS-правило, чтобы выбрать элемент <code>&lt;h1&gt;</code> и изменить его цвет на синий.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="Универсальный_селектор">Универсальный селектор</h2>
+
+<p>Универсальный селектор обозначается звездочкой (<code>*</code>). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера.</span></span> Так как <span class="tlid-translation translation" lang="ru"><span title="">универсальный селектор вызывает глобальные изменения, </span></span><span class="tlid-translation translation" lang="ru"><span title="">мы используем его в очень специфических ситуациях, таких как та, что описана ниже.</span></span></p>
+
+<h3 id="Использование_универсального_селектора_для_облегчения_чтения_ваших_селекторов"><span class="tlid-translation translation" lang="ru"><span title="">Использование универсального селектора для облегчения чтения ваших селекторов</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают.</span></span> Например, если мы хотим выбрать элементы-потомки элемента <code>&lt;article&gt;</code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code>&lt;article&gt;</code>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="https://wiki.developer.mozilla.org/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>, как селектор-потомок вместе с селектором элемента <code>&lt;article&gt;</code>: </p>
+
+<pre class="brush: css notranslate">article :first-child {
+  font-weight: bold;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако этот селектор можно спутать с</span></span> <code>article:first-child</code>, <span class="tlid-translation translation" lang="ru"><span title="">который выберет любой элемент</span></span> <code>&lt;article&gt;</code><span class="tlid-translation translation" lang="ru"><span title="">, являющийся первым дочерним элементом другого элемента</span></span> .</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс</span></span> <code>:first-child</code> <span class="tlid-translation translation" lang="ru"><span title="">, чтобы было очевидно, что делает селектор.</span> <span title="">Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента</span></span> <code>&lt;article&gt;</code> или <span class="tlid-translation translation" lang="ru"><span title="">первым дочерним элементом любого потомка</span></span> <span class="tlid-translation translation" lang="ru"><span title="">элемента</span></span> <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article *:first-child {
+  font-weight: bold;
+} </pre>
+
+<p>Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.</p>
+
+<h2 id="Селекторы_класса">Селекторы класса</h2>
+
+<p>Селектор класса начинается с символа точки (<code>.</code>). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем <code>.highlight</code>, и применили его к нескольким местам в документе. <span class="tlid-translation translation" lang="ru"><span title="">Все элементы, к которым применён класс, подсвечиваются</span></span>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Нацеливание_классов_на_отдельные_элементы"><span class="tlid-translation translation" lang="ru"><span title="">Нацеливание классов на отдельные элементы</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс</span></span>. В следующем примере мы подсветим <code>&lt;span&gt;</code> с классом <code>highlight</code> иначе, чем заголовок <code>&lt;h1&gt;</code> с классом <code>highlight</code>. <span class="tlid-translation translation" lang="ru"><span title="">Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними</span></span>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.</span></span></p>
+
+<h3 id="Нацеливание_на_элемент_к_которому_применено_более_одного_класса"><span class="tlid-translation translation" lang="ru"><span title="">Нацеливание на элемент, к которому применено более одного класса</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора.</span> <span title="">Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.</span></span></p>
+
+<p>В примере ниже у нас есть <code>&lt;div&gt;</code>, содержащий примечание. Серая граница применятеся когда блок имеет класс <code>notebox</code>. Если у блока есть также класс <code>warning</code> или <code>danger</code>, мы меняем {{cssxref("border-color")}}.</p>
+
+<p>Мы можем указать браузеру, что мы хотим подобрать только такой элемент, <span class="tlid-translation translation" lang="ru"><span title="">к которому применены два класса, сцепив их вместе без пробелов между ними. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Вы увидите, что к последнему </span></span><code>&lt;div&gt;</code> <span class="tlid-translation translation" lang="ru"><span title=""> не применён ни один стиль, так как он имеет только класс</span></span> <code>danger</code>; <span class="tlid-translation translation" lang="ru"><span title="">ему нужен ещё и класс </span></span> <code>notebox</code><span class="tlid-translation translation" lang="ru"><span title="">, чтобы получить какую-нибудь стилизацию.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="Селекторы_ID">Селекторы ID</h2>
+
+<p>Селектор ID начинается с <code>#</code>, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один <code>id</code>. Можно выбрать элемент, которому присвоен  <code>id</code>, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Предупреждение: </strong>Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.</p>
+</div>
+
+<h2 id="В_следующей_статье">В следующей статье</h2>
+
+<p>Мы продолжим изучение селекторов и рассмотрим <a href="https://wiki.developer.mozilla.org/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>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html b/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html
new file mode 100644
index 0000000000..b8f36063c2
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html
@@ -0,0 +1,137 @@
+---
+title: 'Проверьте ваши навыки: Селекторы'
+slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи
+tags:
+  - CSS
+  - Начинающий
+translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br>
+ <br>
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> внизу этой страницы.</p>
+</div>
+
+<h2 id="Selectors_One">Selectors One</h2>
+
+<p>Without changing the HTML, use CSS to do the following things:</p>
+
+<ul>
+ <li>Make h1 headings blue.</li>
+ <li>Give h2 headings a blue background and white text.</li>
+ <li>Cause text wrapped in a span to have a font-size of 200%.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Two">Selectors Two</h2>
+
+<p>Without changing the HTML, make the following changes to the look of the content in this example:</p>
+
+<ul>
+ <li>Give the element with an id of <code>special</code> a yellow background.</li>
+ <li>Give the element with a class of <code>alert</code> a 1px grey border.</li>
+ <li>If the element with a class of <code>alert</code> also has a class of <code>stop</code>, make the background red.</li>
+ <li>If the element with a class of <code>alert</code> also has a class of <code>go</code>, make the background green.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Three">Selectors Three</h2>
+
+<p>In this example, try making the following changes without adding to the HTML.</p>
+
+<ul>
+ <li>Style links, making the link-state orange, visited links green, and remove the underline on hover.</li>
+ <li>Make the first element inside the container font-size: 150% and the first line of that element red.</li>
+ <li>Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Four">Selectors Four</h2>
+
+<p>In this task try the following:</p>
+
+<ul>
+ <li>Make any paragraph that directly follows an h2 element red.</li>
+ <li>Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Five">Selectors Five</h2>
+
+<p>In this final task add CSS using attribute selectors to do the following:</p>
+
+<ul>
+ <li>Target the <code>&lt;a&gt;</code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li>
+ <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li>
+ <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li>
+</ul>
+
+<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors mentioned above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>