From b8cc946f62c0f13bdd29675c20bfeffcd6e8bbac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 13:25:31 +0900 Subject: 擬似クラス/擬似要素の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/pseudo-classes/index.html | 167 ----------------------------- files/ja/web/css/pseudo-classes/index.md | 167 +++++++++++++++++++++++++++++ 2 files changed, 167 insertions(+), 167 deletions(-) delete mode 100644 files/ja/web/css/pseudo-classes/index.html create mode 100644 files/ja/web/css/pseudo-classes/index.md (limited to 'files/ja/web/css/pseudo-classes') diff --git a/files/ja/web/css/pseudo-classes/index.html b/files/ja/web/css/pseudo-classes/index.html deleted file mode 100644 index 2be624f4d8..0000000000 --- a/files/ja/web/css/pseudo-classes/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 擬似クラス -slug: Web/CSS/Pseudo-classes -tags: - - CSS - - Reference - - セレクター - - 擬似クラス - - 概要 - - 疑似クラス -translation_of: Web/CSS/Pseudo-classes ---- -
{{CSSRef}}
- -

CSS の擬似クラス (Pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

- -
/* ユーザーのポインターが当たっているすべてのボタン */
-button:hover {
-  color: blue;
-}
- -

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。

- -
-

メモ: 擬似要素は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の特定の部分にスタイルを適用するために使用します。

-
- -

構文

- -
selector:pseudo-class {
-  property: value;
-}
-
- -

通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。

- -

標準擬似クラスの索引

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}:fullscreen を定義。
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}いつ特定のセレクターが HTML 要素に一致するのかを定義。
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}:any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where() を定義
- :empty の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。
- {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}正規の (WHATWG) HTML 仕様書から関連する節を複写。
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。
- :enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。
- {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}:lang(), :first-child, :hover, :focus を定義。
- {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}:link, :visited, :active を定義。ただし意味論的な意味は定義していません。
- -

関連情報

- - diff --git a/files/ja/web/css/pseudo-classes/index.md b/files/ja/web/css/pseudo-classes/index.md new file mode 100644 index 0000000000..2be624f4d8 --- /dev/null +++ b/files/ja/web/css/pseudo-classes/index.md @@ -0,0 +1,167 @@ +--- +title: 擬似クラス +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Reference + - セレクター + - 擬似クラス + - 概要 + - 疑似クラス +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

CSS の擬似クラス (Pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

+ +
/* ユーザーのポインターが当たっているすべてのボタン */
+button:hover {
+  color: blue;
+}
+ +

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。

+ +
+

メモ: 擬似要素は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の特定の部分にスタイルを適用するために使用します。

+
+ +

構文

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。

+ +

標準擬似クラスの索引

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}:fullscreen を定義。
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}いつ特定のセレクターが HTML 要素に一致するのかを定義。
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}:any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where() を定義
+ :empty の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。
+ {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}正規の (WHATWG) HTML 仕様書から関連する節を複写。
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。
+ :enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。
+ {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}:lang(), :first-child, :hover, :focus を定義。
+ {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}:link, :visited, :active を定義。ただし意味論的な意味は定義していません。
+ +

関連情報

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