initial commit

1 files changed, 157 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..6af554ac77
--- /dev/null
+++ b/files/ru/web/css/_colon_where/index.html
@@ -0,0 +1,157 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - ':where'
+  - CSS
+  - псевдокласс
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс </a><strong><code>:where()</code> </strong>в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.</div>
+
+<div></div>
+
+<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main
+   или footer на который наведен курсор мыши */
+:where(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}</code></pre>
+
+<p>Разница между <code>:where()</code> и {{CSSxRef(":is", ":is()")}} заключается в том, что <code>:where()</code> всегда имеет нулевую <a href="ru/docs/Web/CSS/Specificity">специфичность селектора</a>, тогда как специфичность <code>:is()</code> равна самому специфичному селектору из списка переданных аргументов.</p>
+
+<h3 id="Парсинг_forgiving-селектора">Парсинг forgiving-селектора</h3>
+
+<p>В спецификации псевдоклассы <code>:is()</code> и <code>:where()</code> относятся к так называемому <a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">forgiving selector list</a> (прощающий список селекторов).</p>
+
+<p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет неккоректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p>
+
+<pre class="brush: css notranslate">:where(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Код будет полностью проигнорирован в браузерах, которые не поддерживают <code>:unsupported</code>, даже не смотря на то, что они поддерживают <code>:valid</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сравнение_where_и_is">Сравнение :where() и :is()</h3>
+
+<p>В этом примере показывается как работает <code>:where()</code>, а так же демонстрируется разница между <code>:where()</code> и <code>:is()</code>.</p>
+
+<p>Возьмем следующий HTML-код:</p>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h2&gt;:is()-styled links&lt;/h2&gt;
+  &lt;section class="is-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="is-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="is-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  &lt;h2&gt;:where()-styled links&lt;/h2&gt;
+  &lt;section class="where-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="where-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="where-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+<p>В примере выше у нас представлено две статьи, каждая из которых содержит следующиее блоки: <code>section</code>, <code>aside</code> и <code>footer</code>. Каждый из блоков имеет свой CSS-класс.</p>
+
+<p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}</pre>
+
+<p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p>
+
+<pre class="brush: css notranslate">footer a {
+  color: blue;
+}</pre>
+
+<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p>
+
+<p>В то время как, селекторы перечисленные внутри <code>:where()</code> имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.</p>
+
+<p><strong>Примечание</strong>: Вы так же можете найти этот пример на Github; смотрите <a href="https://mdn.github.io/css-examples/is-where/">is-where</a>.</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из готовых данных. Если бы вы хотели добавить свою информацию, пожалуйста проверьте на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.selectors.where")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+</ul>