1 files changed, 137 insertions, 0 deletions
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>