blob: e86a77f80ed0a4be2bd145336efcfcf2700c2c5f (
plain)
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
|
---
title: ':not()'
slug: 'Web/CSS/:not'
tags:
- ':not()'
- CSS
- Layout
- Negation
- Pseudo-class
- Reference
- Selector
- Web
translation_of: 'Web/CSS/:not'
---
<div>{{CSSRef}}</div>
<p><strong><code>:not()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、<em>否定擬似クラス (negation pseudo-class)</em> と呼ばれています。</p>
<pre class="brush: css no-line-numbers notranslate">/* 段落以外の要素を選択 */
:not(p) {
color: blue;
}</pre>
<p><code>:not()</code> 擬似クラスには、使用する前に知っておいた方が良い<a href="/ja/docs/Web/CSS/:not#Description">クセやコツ、予想外の結果</a>がいくつかあります。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>:not()</code> 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を含めることはできません。</p>
<div class="warning">
<p>複数のセレクターを指定することは実験的な機能で、広くは対応されていません。</p>
</div>
{{csssyntax}}
<h2 id="Description" name="Description">解説</h2>
<p><code>:not()</code> を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。</p>
<ul>
<li><code>:not</code> 擬似クラスは入れ子にすることができません。すなわち <code>:not(:not(...))</code> は無効です。</li>
<li>擬似要素は単純セレクターではありませんので、 <code>:not()</code> で有効な引数にはなりません。従って、 <code>:not(p::before)</code> のようなセレクターは動作しません。</li>
<li>この擬似クラスを使用して無意味なセレクターを書くことができます。例えば、 <code>:not(*)</code> は要素ではないすべての要素を選択するので、規則は適用されません。</li>
<li>この擬似クラスは規則の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>を上げることができます。例えば、 <code>#foo:not(#bar)</code> は単純な <code>#foo</code> と同じ要素を選択しますが、詳細度はより高くなります。</li>
<li><code>:not(.foo)</code> は <code>.foo</code> ではないすべての要素を選択するため、<em>{{HTMLElement("html")}} や {{HTMLElement("body")}} も選択します。</em></li>
<li>このセレクターは1つの要素のみに適用されます。先祖要素を除外することはできません。例えば、 <code>body :not(table) a</code> はテーブル内のリンクにも適用されます。 {{HTMLElement("tr")}} がセレクターの <code>:not()</code> の部分に該当するからです。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">.fancy {
text-shadow: 2px 2px 3px gold;
}
/* '.fancy' クラスの中にない <p> 要素 */
p:not(.fancy) {
color: green;
}
/* <p> 要素ではない要素 */
body :not(p) {
text-decoration: underline;
}
/* <div> または <span> 要素ではない要素 */
body :not(div):not(span) {
font-weight: bold;
}
/* '.crazy' または '.fancy' ではない要素 */
/* なお、この文法は十分に対応されていません。 */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Examples')}}</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>
<div>
<p>{{Compat("css.selectors.not")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li>
<li>関連する CSS 擬似クラス:
<ul>
<li>{{cssxref(":has", ":has()")}}</li>
<li>{{cssxref(":is", ":is()")}}</li>
<li>{{cssxref(":where", ":where()")}}</li>
</ul>
</li>
</ul>
</div>
|
