From e88ee8ff8c90ac49df1fa5c1163d8c3ce3f114bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 01:00:48 +0900 Subject: 2021/12/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_not/index.md | 172 ++++++++++++++++------------------- 1 file changed, 79 insertions(+), 93 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_not/index.md b/files/ja/web/css/_colon_not/index.md index e86a77f80e..f580dcf7f6 100644 --- a/files/ja/web/css/_colon_not/index.md +++ b/files/ja/web/css/_colon_not/index.md @@ -1,131 +1,117 @@ --- title: ':not()' -slug: 'Web/CSS/:not' +slug: Web/CSS/:not tags: - ':not()' - CSS - - Layout - - Negation - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:not' + - レイアウト + - 否定 + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.not +translation_of: Web/CSS/:not --- -
{{CSSRef}}
+{{CSSRef}} -

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

+**`:not()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (_negation pseudo-class_) と呼ばれています。 -
/* 段落以外の要素を選択 */
+```css
+/* 段落以外の要素を選択 */
 :not(p) {
   color: blue;
-}
- -

:not() 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

+} +``` -

構文

+`:not()` 擬似クラスには、使用する前に知っておいた方が良い[クセやコツ、予想外の結果](#解説)がいくつかあります。 -

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

+## 構文 -
-

複数のセレクターを指定することは実験的な機能で、広くは対応されていません。

-
+`:not()` 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含めることはできません。 {{csssyntax}} -

解説

+## 解説 -

:not() を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

+`:not()` を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。 - +- `:not` 擬似クラスは入れ子にすることができません。すなわち `:not(:not(...))` は無効です。 +- この擬似クラスを使用して無意味なセレクターを書くことができます。例えば、 `:not(*)` は要素ではないすべての要素を選択するので、ルールは適用されません。 +- この擬似クラスはルールの[詳細度](/ja/docs/Web/CSS/Specificity)を上げることができます。例えば、 `#foo:not(#bar)` は単純な `#foo` と同じ要素を選択しますが、詳細度はより高くなります。 +- `:not(.foo)` は `.foo` ではないすべての要素を選択するため、*{{HTMLElement("html")}} や {{HTMLElement("body")}} も*選択します。 +- このセレクターは 1 つの要素のみに適用されます。祖先要素を除外することはできません。例えば、 `body :not(table) a` はテーブル内のリンクにも適用されます。 {{HTMLElement("tr")}} がセレクターの `:not()` の部分に該当するからです。 +- 2 つのセレクターを同時に使用することは、まだすべてのブラウザーが対応しているわけではありません。例: `:not(.foo, .bar)`. より広く対応するためには、 `:not(.foo):not(.bar)` を使用することができます。 -

例

+## 例 -

HTML

+### 基本的な一連の :not() の例 -
<p>I am a paragraph.</p>
-<p class="fancy">I am so very fancy!</p>
-<div>I am NOT a paragraph.</div>
-
+#### HTML -

CSS

+```html +

I am a paragraph.

+

I am so very fancy!

+
I am NOT a paragraph.
+

+  foo inside h2 +  bar inside h2 +

+``` -
.fancy {
+#### CSS
+
+```css
+.fancy {
   text-shadow: 2px 2px 3px gold;
 }
 
-/* '.fancy' クラスの中にない <p> 要素 */
+/* '.fancy' クラスの中にない 
 要素 */
 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;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}引数で単純セレクター以外も許容数量に拡張。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初回定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.not")}}

- -

関連情報

- - -
+/*
でも '.fancy' でもない要素 */ +/* なお、この文法は対応が充分ではありません。 */ +body :not(div, .fancy) { + text-decoration: overline underline; +} + +/*

の中にある要素で に foo クラスでないもの */ +/* クラス付き要素のような複雑なセレクターは、まだ対応が充分ではありません。 */ +h2 :not(span.foo) { +  color: red; +} +``` + +#### 結果 + +{{EmbedLiveSample('Basic_set_of_not_examples', '100%', 320)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) +- [擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) +- 関連する CSS 擬似クラス: + + - {{cssxref(":has", ":has()")}} + - {{cssxref(":is", ":is()")}} + - {{cssxref(":where", ":where()")}} -- cgit v1.2.3-54-g00ecf