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
|
---
title: ':not()'
slug: 'Web/CSS/:not'
translation_of: 'Web/CSS/:not'
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Описание</h2>
<p><strong>Отрицательный </strong><a href="/ru/docs/CSS/Pseudo-classes" title="Pseudo-classes">CSS псевдокласс</a>, <code>:not(X)</code> - функция, принимающая простой селектор <var>X</var> в качестве аргумента. Он находит элементы, не соответствующие селектору. <var>X</var> не должен содержать других отрицательных селекторов.</p>
<div class="note"><strong>Замечания:</strong>
<ul>
<li>С этого псевдокласса можно написать бесполезные селекторы. Например, <code>:not(*)</code> найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.</li>
<li>Возможно переписать другие правила. Например <code>foo:not(bar)</code> найдёт тот же элемент, что и простой <code>foo</code>. Тем не менее <a href="/ru/docs/CSS/Specificity" title="Specificity">специфичность</a> первого выше.</li>
<li><code>:not(foo){} </code>найдёт что угодно, что не <code>foo</code>, <strong>включая {{HTMLElement("html")}} и {{HTMLElement("body")}}.</strong></li>
<li>Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, <code>body :not(table) a</code> применится к ссылкам внутри таблицы, тогда как {{HTMLElement("tr")}} будет соответствовать <code>:not()</code> части селектора.</li>
</ul>
</div>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox">:not(selector) { <em>style properties</em> }</pre>
<h2 id="Examples" name="Examples">Пример</h2>
<pre class="brush: css">p:not(.classy) { color: red; }
body :not(p) { color: green; }</pre>
<p>CSS выше и HTML ниже...</p>
<pre class="brush: html"><p>Некоторый текст.</p>
<p class="classy">Какой-то другой текст.</p>
<span>Ещё текст<span>
</pre>
<p>Выведет это:</p>
<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}</p>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Аргумент расширен до поддержки нескольких непростых селекторов.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Изначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>9.0</td>
<td>9.5</td>
<td>3.2</td>
</tr>
<tr>
<td>Расширенные аргументы</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>2.1</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>9.0</td>
<td>10.0</td>
<td>3.2</td>
</tr>
<tr>
<td>Расширенные аргументы</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
