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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: ':any'
slug: 'Web/CSS/:any'
tags:
- CSS
- Experimental
- Псевдоклассы
- Руководство
- Экспериментальное
translation_of: 'Web/CSS/:is'
translation_of_original: 'Web/CSS/:any'
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Summary" name="Summary">Описание</h2>
<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p>
<div class="note"><strong>Замечание: </strong>Этот псевдо-класс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre>
<h3 id="Values" name="Values">Параметры</h3>
<dl>
<dt><code>selector</code></dt>
<dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd>
</dl>
<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div>
<h2 id="Examples" name="Examples">Примеры</h2>
<p>Например, следующий CSS:</p>
<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}
</pre>
<p>Может быть записано, как:</p>
<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
list-style-type: square;
}</pre>
<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p>
<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
list-style-type: square;
}</pre>
<h2 id="Notes" name="Notes">Примечания</h2>
<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p>
<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p>
<pre class="brush: css">/* Уровень 0 */
h1 {
font-size: 30px;
}
/* Уровень 1 */
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
/* Уровень 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
font-size: 20px;
}
/* Уровень 3 */
/* ... даже не думайте о нём*/
</pre>
<p>При использовании <code>:-any()</code>, это становится намного проще:</p>
<pre class="brush: css">/* Уровень 0 */
h1 {
font-size: 30px;
}
/* Уровень 1 */
:-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Уровень 2 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
font-size: 20px;
}
/* Уровень 3 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
font-size: 15px;
}</pre>
<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3>
<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p>
<p>Например:</p>
<pre class="brush: css">.a > :-moz-any(.b, .c)
</pre>
<p>медленнее, чем:</p>
<pre class="brush: css">.a > .b, .a > .c
</pre>
<p>а следующее быстрее:</p>
<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td>
<td>12.0 (534.30){{property_prefix("-webkit")}}</td>
<td> </td>
<td> </td>
<td>
<p>5<br>
{{property_prefix("-webkit")}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>5<br>
{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
|
