From d2a9c594e446e7592360c3ada8469fde590649f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 00:15:25 +0900 Subject: その他の CSS 擬似クラスの記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_not/index.html | 131 --------------------------------- files/ja/web/css/_colon_not/index.md | 131 +++++++++++++++++++++++++++++++++ 2 files changed, 131 insertions(+), 131 deletions(-) delete mode 100644 files/ja/web/css/_colon_not/index.html create mode 100644 files/ja/web/css/_colon_not/index.md (limited to 'files/ja/web/css/_colon_not') diff --git a/files/ja/web/css/_colon_not/index.html b/files/ja/web/css/_colon_not/index.html deleted file mode 100644 index e86a77f80e..0000000000 --- a/files/ja/web/css/_colon_not/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: ':not()' -slug: 'Web/CSS/:not' -tags: - - ':not()' - - CSS - - Layout - - Negation - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

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

- -
/* 段落以外の要素を選択 */
-:not(p) {
-  color: blue;
-}
- -

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

- -

構文

- -

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

- -
-

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

-
- -{{csssyntax}} - -

解説

- -

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

- - - -

例

- -

HTML

- -
<p>I am a paragraph.</p>
-<p class="fancy">I am so very fancy!</p>
-<div>I am NOT a paragraph.</div>
-
- -

CSS

- -
.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;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

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

ブラウザーの互換性

- -
-

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

- -

関連情報

- - -
diff --git a/files/ja/web/css/_colon_not/index.md b/files/ja/web/css/_colon_not/index.md new file mode 100644 index 0000000000..e86a77f80e --- /dev/null +++ b/files/ja/web/css/_colon_not/index.md @@ -0,0 +1,131 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - ':not()' + - CSS + - Layout + - Negation + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

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

+ +
/* 段落以外の要素を選択 */
+:not(p) {
+  color: blue;
+}
+ +

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

+ +

構文

+ +

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

+ +
+

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

+
+ +{{csssyntax}} + +

解説

+ +

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

+ + + +

例

+ +

HTML

+ +
<p>I am a paragraph.</p>
+<p class="fancy">I am so very fancy!</p>
+<div>I am NOT a paragraph.</div>
+
+ +

CSS

+ +
.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;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

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

ブラウザーの互換性

+ +
+

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

+ +

関連情報

+ + +
-- cgit v1.2.3-54-g00ecf