initial commit

1 files changed, 433 insertions, 0 deletions

diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html
new file mode 100644
index 0000000000..7af11a31e1
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/selectors/index.html
@@ -0,0 +1,433 @@
+---
+title: Selectors
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}Это пятый раздел руководства <a href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты. <span class="seoSummary"> </span></p>
+
+<p>Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.</p>
+
+<h2 class="clearLeft" id="Информация_Селекторы">Информация: Селекторы</h2>
+
+<p>Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>В терминологии CSS эта строка полностью является <em>правилом CSS</em>. Это правило начинается со <code>strong</code>, что и называется <em>селектором</em> <em>CSS</em>. Селектор выбирает, к каким элементам DOM применяется правило.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробности</div>
+
+<p>Часть внутри фигурных скобок называется <em>объявлением</em>.</p>
+
+<p>Ключевое слово <code>color</code> - <em>свойство</em>, а <code>red</code> - <em>значение</em>.</p>
+
+<p>Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.</p>
+
+<p>Этот учебник ссылается на селектор типа <code>strong</code> как на селектор <em>тега</em>. Спецификация CSS ссылается на него как на селектор <em>типа</em>.</p>
+</div>
+
+<p>На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.</p>
+
+<p>В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.</p>
+
+<p>Два атрибута имеют особый статус в CSS. Это <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> и <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Селекторы_классов">Селекторы классов</h3>
+
+<p>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.</p>
+
+<p>В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.</p>
+
+<h3 id="Селекторы_ID">Селекторы ID</h3>
+
+<p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p>
+
+<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+Этот HTML тэг имеет оба элемента, атрибут <code>class</code> и <code>id</code>:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Значение идентификатора <strong>id</strong>, <code>principal</code>, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя <strong>class</strong> со значением <code>key</code>.</p>
+
+<p>Это правило делает все классы(class) со значением<code>key</code> зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Это правило делает один элемент с идентификатором (<strong>id</strong>) и значением <code>principal</code> полужирным:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<h3 id="Селекторы_Атрибутов">Селекторы Атрибутов</h3>
+
+<p>Вы не ограничены двумя специальными атрибутами, <code>class</code> и <code>id</code>. Вы можете определить <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">другие атрибуты</a> используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:</p>
+
+<dl>
+ <dt><code>[disabled]</code></dt>
+ <dd>Выбирает все элементы с атрибутом "disabled".</dd>
+ <dt><code>[type='button']</code></dt>
+ <dd>Выбирает элементы с типом "button".</dd>
+ <dt><code>[class~=key]</code></dt>
+ <dd>Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно <code>.key</code>.</dd>
+ <dt><code>[lang|=es]</code></dt>
+ <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd>
+ <dt>[title*="example" i]</dt>
+ <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd>
+ <dt><code>a[href^="https://"]</code></dt>
+ <dd>Выбирает все защищённые ссылки.</dd>
+ <dt><code>img[src$=".png"]</code></dt>
+ <dd>Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.</dd>
+</dl>
+
+<h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3>
+
+<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобии {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобии {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Список_псевдоклассов"><span class="short_text" id="result_box" lang="ru"><span>Список псевдоклассов</span></span></h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div>
+
+<p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p>
+</div>
+
+<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p>
+
+<h2 id="Информация_Селекторы_на_основе_отношений"><span class="short_text" id="result_box" lang="ru"><span>Информация: Селекторы на основе отношений</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>CSS имеет несколько способов выбора элементов на основе отношений между элементами.</span> <span>Вы можете использовать их, чтобы сделать селектора более конкретными.</span></span></p>
+
+<table id="relselectors">
+ <caption><span class="short_text" id="result_box" lang="ru"><span>Общие селекторы, основанные на отношениях</span></span></caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Селектор</strong></td>
+   <td><strong>Выбрано</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Любой E элемент, что является <em>потомком</em> одного из A элемента (то есть: дочерний, или один из дочернего, <em>т.д.</em>)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Любой E элемент, что явлется  <em>дочерним</em> (т.е. прямой потомок)  A элемента.</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Любой E элемент, что является первым <em>дочерним</em> элементом родительского элемента.</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете комбинировать их для выражения сложных отношений.</p>
+
+<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица HTML имеет аттрибут <code>id</code> , но строки и ячейки не имеют отдельных идентификаторов:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;}
+#data-table-1 td:first-child + td {text-decoration: line-through;}
+</pre>
+
+<p>Резульат  выглядит  наподобии:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><u>Prefix</u></td>
+       <td><s>0001</s></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробно</div>
+
+<p><span id="result_box" lang="ru"><span>Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.</span></span></p>
+
+<p>Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах <code>class</code> или <code>id</code> на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.</p>
+
+<p><span id="result_box" lang="ru"><span>В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.</span></span></p>
+
+<p>Дополнительные примеры о таблицах, смотрите <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> на странице ссылок CSS.</p>
+</div>
+
+<h2 id="Действие_Использование_селекторов_class_и_ID">Действие: Использование селекторов class и ID</h2>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него</span></span>.</li>
+ <li>Затем добавьте аттрибуты <strong>id</strong> и <strong>class</strong>  в первую копию, а аттрибут <strong>id</strong> во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат:</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p><span id="result_box" lang="ru"><span>Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.</span></span></p>
+
+  <p>Селекторы классов <code>.carrot</code> и <code>.spinach</code> имеют приоритет над селектором тега <code>strong</code>.</p>
+
+  <p>Селектор ID <code>#first</code> имеет приоритет над селекторами класс и тег.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызовы</div>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:</span></span>
+
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:</span></span>
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Действие_Использование_селекторов_псевдокласса">Действие: Использование селекторов псевдокласса</h2>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Создайте HTML-файл со следующим содержимым</span></span>:
+
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Действие_Использование_селекторов_на_основе_отношений_и_псевдоклассов">Действие: Использование селекторов на основе отношений и псевдоклассов</h2>
+
+<p><span id="result_box" lang="ru"><span>С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы.</span></span> <span id="result_box" lang="ru"><span>Это обычная техника, используемая, например, для создания</span></span> <strong>чисто-CSS выпадающее меню</strong> ( <span id="result_box" lang="ru"><span>это только CSS, без использования JavaScript).</span> <span>Суть этого метода заключается в создании правила следующего вида:</span></span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>для применения к структуре HTML, наподобии следующей:</span></span></p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">Пример CSS-основанного выпадающего меню</a> для возможной реплики.</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>