1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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"><article>
<h2>:is()-styled links</h2>
<section class="is-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
</section>
<aside class="is-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
</aside>
<footer class="is-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
</footer>
</article>
<article>
<h2>:where()-styled links</h2>
<section class="where-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
</section>
<aside class="where-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
</aside>
<footer class="where-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
</footer>
</article></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>
{{CSSSyntax}}
<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>
|
