remove conflicting css building blocks selectors page with redirects (#1122)

3 files changed, 0 insertions, 449 deletions

diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index bef83363eb..f0156d2c81 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -585,7 +585,6 @@
 /ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works	/ru/docs/conflicting/Learn/CSS/First_steps/How_CSS_works
 /ru/docs/Web/Guide/CSS/Getting_started/Readable_CSS	/ru/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured
 /ru/docs/Web/Guide/CSS/Getting_started/SVG_и_CSS	/ru/docs/Web/SVG/Tutorial/SVG_and_CSS
-/ru/docs/Web/Guide/CSS/Getting_started/Selectors	/ru/docs/conflicting/Learn/CSS/Building_blocks/Selectors_918fb6c37a4d06789bc062c48d591992
 /ru/docs/Web/Guide/CSS/Getting_started/Text_styles	/ru/docs/conflicting/Learn/CSS/Styling_text/Fundamentals
 /ru/docs/Web/Guide/CSS/Getting_started/What_is_CSS	/ru/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209
 /ru/docs/Web/Guide/CSS/Getting_started/Why_use_CSS	/ru/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index e309cf5b66..2b64323dd2 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -24476,18 +24476,6 @@
       "sviter"
     ]
   },
-  "conflicting/Learn/CSS/Building_blocks/Selectors_918fb6c37a4d06789bc062c48d591992": {
-    "modified": "2020-02-28T21:44:59.981Z",
-    "contributors": [
-      "nkaskov",
-      "SergeyNikolaev70",
-      "1cprog",
-      "Tankerxyz",
-      "BigBond",
-      "mztrp",
-      "tnt4brain"
-    ]
-  },
   "conflicting/Learn/CSS/Building_blocks/Styling_tables": {
     "modified": "2019-03-23T23:09:44.945Z",
     "contributors": [
diff --git a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
deleted file mode 100644
index e565ec9839..0000000000
--- a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
+++ /dev/null
@@ -1,436 +0,0 @@
----
-title: Selectors
-slug: >-
-  conflicting/Learn/CSS/Building_blocks/Selectors_918fb6c37a4d06789bc062c48d591992
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
-original_slug: Web/Guide/CSS/Getting_started/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 class="hidden"> </span><span class="hidden"> </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>