From b8cc946f62c0f13bdd29675c20bfeffcd6e8bbac Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
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 ++++++++++++++++++++++++++++
files/ja/web/css/pseudo-elements/index.html | 125 ---------------------
files/ja/web/css/pseudo-elements/index.md | 125 +++++++++++++++++++++
4 files changed, 292 insertions(+), 292 deletions(-)
delete mode 100644 files/ja/web/css/pseudo-classes/index.html
create mode 100644 files/ja/web/css/pseudo-classes/index.md
delete mode 100644 files/ja/web/css/pseudo-elements/index.html
create mode 100644 files/ja/web/css/pseudo-elements/index.md
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
----
-<div>{{CSSRef}}</div>
-
-<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong><dfn>擬似クラス</dfn></strong><rp> (</rp><rt>Pseudo-classes</rt><rp>) </rp></ruby>は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。</span>例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。</p>
-
-<pre class="brush: css no-line-numbers">/* ユーザーのポインターが当たっているすべてのボタン */
-button:hover {
- color: blue;
-}</pre>
-
-<p>擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。</p>
-
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の<em>特定の部分</em>にスタイルを適用するために使用します。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">selector:pseudo-class {
- property: value;
-}
-</pre>
-
-<p>通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。</p>
-
-<h2 id="Index_of_standard_pseudo-classes" name="Index_of_standard_pseudo-classes">標準擬似クラスの索引</h2>
-
-<div class="index" id="index">
-<ul>
- <li>{{CSSxRef(":active")}}</li>
- <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":checked")}}</li>
- <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":default")}}</li>
- <li>{{CSSxRef(":defined")}}</li>
- <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":disabled")}}</li>
- <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":empty")}}</li>
- <li>{{CSSxRef(":enabled")}}</li>
- <li>{{CSSxRef(":first")}}</li>
- <li>{{CSSxRef(":first-child")}}</li>
- <li>{{CSSxRef(":first-of-type")}}</li>
- <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":focus")}}</li>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":focus-within")}}</li>
- <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":host")}}</li>
- <li>{{CSSxRef(":host()")}}</li>
- <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":hover")}}</li>
- <li>{{CSSxRef(":indeterminate")}}</li>
- <li>{{CSSxRef(":in-range")}}</li>
- <li>{{CSSxRef(":invalid")}}</li>
- <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":lang", ":lang()")}}</li>
- <li>{{CSSxRef(":last-child")}}</li>
- <li>{{CSSxRef(":last-of-type")}}</li>
- <li>{{CSSxRef(":left")}}</li>
- <li>{{CSSxRef(":link")}}</li>
- <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":not", ":not()")}}</li>
- <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
- <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
- <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
- <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
- <li>{{CSSxRef(":only-child")}}</li>
- <li>{{CSSxRef(":only-of-type")}}</li>
- <li>{{CSSxRef(":optional")}}</li>
- <li>{{CSSxRef(":out-of-range")}}</li>
- <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":read-only")}}</li>
- <li>{{CSSxRef(":read-write")}}</li>
- <li>{{CSSxRef(":required")}}</li>
- <li>{{CSSxRef(":right")}}</li>
- <li>{{CSSxRef(":root")}}</li>
- <li>{{CSSxRef(":scope")}}</li>
- <li>{{CSSxRef(":target")}}</li>
- <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":valid")}}</li>
- <li>{{CSSxRef(":visited")}}</li>
- <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
-</ul>
-</div>
-
-<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("Fullscreen")}}</td>
- <td>{{Spec2("Fullscreen")}}</td>
- <td><code>:fullscreen</code> を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
- <td>{{Spec2("HTML WHATWG")}}</td>
- <td>いつ特定のセレクターが HTML 要素に一致するのかを定義。</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS4 Selectors")}}</td>
- <td>{{Spec2("CSS4 Selectors")}}</td>
- <td><code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code> を定義<br>
- <code>:empty</code> の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。<br>
- {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。</td>
- </tr>
- <tr>
- <td>{{SpecName("HTML5 W3C")}}</td>
- <td>{{Spec2("HTML5 W3C")}}</td>
- <td>正規の (WHATWG) HTML 仕様書から関連する節を複写。</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS3 Basic UI")}}</td>
- <td>{{Spec2("CSS3 Basic UI")}}</td>
- <td><code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> を定義。ただし意味論的な意味は定義していません。</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS3 Selectors")}}</td>
- <td>{{Spec2("CSS3 Selectors")}}</td>
- <td><code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, <code>:not()</code> を定義。<br>
- <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> の構文を定義。ただし意味論的な意味は定義していません。<br>
- {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS2.1")}}</td>
- <td>{{Spec2("CSS2.1")}}</td>
- <td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code> を定義。<br>
- {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS1")}}</td>
- <td>{{Spec2("CSS1")}}</td>
- <td><code>:link</code>, <code>:visited</code>, <code>:active</code> を定義。ただし意味論的な意味は定義していません。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a></li>
-</ul>
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
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong><dfn>擬似クラス</dfn></strong><rp> (</rp><rt>Pseudo-classes</rt><rp>) </rp></ruby>は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。</span>例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。</p>
+
+<pre class="brush: css no-line-numbers">/* ユーザーのポインターが当たっているすべてのボタン */
+button:hover {
+ color: blue;
+}</pre>
+
+<p>擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の<em>特定の部分</em>にスタイルを適用するために使用します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+ property: value;
+}
+</pre>
+
+<p>通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。</p>
+
+<h2 id="Index_of_standard_pseudo-classes" name="Index_of_standard_pseudo-classes">標準擬似クラスの索引</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<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("Fullscreen")}}</td>
+ <td>{{Spec2("Fullscreen")}}</td>
+ <td><code>:fullscreen</code> を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
+ <td>{{Spec2("HTML WHATWG")}}</td>
+ <td>いつ特定のセレクターが HTML 要素に一致するのかを定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS4 Selectors")}}</td>
+ <td>{{Spec2("CSS4 Selectors")}}</td>
+ <td><code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code> を定義<br>
+ <code>:empty</code> の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。<br>
+ {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C")}}</td>
+ <td>{{Spec2("HTML5 W3C")}}</td>
+ <td>正規の (WHATWG) HTML 仕様書から関連する節を複写。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS3 Basic UI")}}</td>
+ <td>{{Spec2("CSS3 Basic UI")}}</td>
+ <td><code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> を定義。ただし意味論的な意味は定義していません。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS3 Selectors")}}</td>
+ <td>{{Spec2("CSS3 Selectors")}}</td>
+ <td><code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, <code>:not()</code> を定義。<br>
+ <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> の構文を定義。ただし意味論的な意味は定義していません。<br>
+ {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS2.1")}}</td>
+ <td>{{Spec2("CSS2.1")}}</td>
+ <td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code> を定義。<br>
+ {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSS1")}}</td>
+ <td>{{Spec2("CSS1")}}</td>
+ <td><code>:link</code>, <code>:visited</code>, <code>:active</code> を定義。ただし意味論的な意味は定義していません。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a></li>
+</ul>
diff --git a/files/ja/web/css/pseudo-elements/index.html b/files/ja/web/css/pseudo-elements/index.html
deleted file mode 100644
index d46d32bce6..0000000000
--- a/files/ja/web/css/pseudo-elements/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: 擬似要素 (Pseudo-elements)
-slug: Web/CSS/Pseudo-elements
-tags:
- - CSS
- - Guide
- - Overview
- - Pseudo-element
- - Reference
- - Selectors
-translation_of: Web/CSS/Pseudo-elements
----
-<div>{{CSSRef}}</div>
-
-<p>CSS の <ruby><strong>擬似要素</strong><rp> (</rp><rt>Pseudo-elements</rt><rp>) </rp></ruby>はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 各 <p> 要素の最初の行です。 */
-p::first-line {
- color: blue;
- text-transform: uppercase;
-}</pre>
-
-<div class="blockIndicator note">
-<p><strong>注:</strong> 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の<em>状態</em>に基づいてスタイル付けを行うことができます。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">selector::pseudo-element {
- property: value;
-}</pre>
-
-<p>擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。</p>
-
-<div class="blockIndicator note">
-<p><strong>注:</strong> 規則として、単一コロン (<code>:</code>) の代わりに二重コロン (<code>::</code>) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。</p>
-</div>
-
-<h2 id="Index_of_standard_pseudo-elements" name="Index_of_standard_pseudo-elements">標準の擬似要素の索引</h2>
-
-<div class="index" id="index">
-<ul>
- <li>{{CSSxRef("::after", "::after (:after)")}}</li>
- <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::before", "::before (:before)")}}</li>
- <li>{{CSSxRef("::cue")}}</li>
- <li>{{CSSxRef("::cue-region")}}</li>
- <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
- <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
- <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::selection")}}</li>
- <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
- <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
-</ul>
-</div>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th>ブラウザー</th>
- <th>対応開始バージョン</th>
- <th>対応内容</th>
- </tr>
- <tr>
- <td rowspan="2">Internet Explorer</td>
- <td>8.0</td>
- <td><code>:pseudo-element</code></td>
- </tr>
- <tr>
- <td>9.0</td>
- <td><code>:pseudo-element ::pseudo-element</code></td>
- </tr>
- <tr>
- <td rowspan="2">Firefox (Gecko)</td>
- <td>1.0 (1.0)</td>
- <td><code>:pseudo-element</code></td>
- </tr>
- <tr>
- <td>1.0 (1.5)</td>
- <td><code>:pseudo-element ::pseudo-element</code></td>
- </tr>
- <tr>
- <td rowspan="2">Opera</td>
- <td>4.0</td>
- <td><code>:pseudo-element</code></td>
- </tr>
- <tr>
- <td>7.0</td>
- <td><code>:pseudo-element ::pseudo-element</code></td>
- </tr>
- <tr>
- <td>Safari (WebKit)</td>
- <td>1.0 (85)</td>
- <td><code>:pseudo-element ::pseudo-element</code></td>
- </tr>
- </tbody>
-</table>
-
-<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("CSS1")}}</td>
- <td>{{Spec2("CSS1")}}</td>
- <td>擬似クラスと擬似要素を定義した。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></li>
-</ul>
diff --git a/files/ja/web/css/pseudo-elements/index.md b/files/ja/web/css/pseudo-elements/index.md
new file mode 100644
index 0000000000..d46d32bce6
--- /dev/null
+++ b/files/ja/web/css/pseudo-elements/index.md
@@ -0,0 +1,125 @@
+---
+title: 擬似要素 (Pseudo-elements)
+slug: Web/CSS/Pseudo-elements
+tags:
+ - CSS
+ - Guide
+ - Overview
+ - Pseudo-element
+ - Reference
+ - Selectors
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <ruby><strong>擬似要素</strong><rp> (</rp><rt>Pseudo-elements</rt><rp>) </rp></ruby>はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 各 <p> 要素の最初の行です。 */
+p::first-line {
+ color: blue;
+ text-transform: uppercase;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の<em>状態</em>に基づいてスタイル付けを行うことができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">selector::pseudo-element {
+ property: value;
+}</pre>
+
+<p>擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 規則として、単一コロン (<code>:</code>) の代わりに二重コロン (<code>::</code>) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。</p>
+</div>
+
+<h2 id="Index_of_standard_pseudo-elements" name="Index_of_standard_pseudo-elements">標準の擬似要素の索引</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef("::after", "::after (:after)")}}</li>
+ <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::before", "::before (:before)")}}</li>
+ <li>{{CSSxRef("::cue")}}</li>
+ <li>{{CSSxRef("::cue-region")}}</li>
+ <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
+ <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
+ <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::selection")}}</li>
+ <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
+ <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>ブラウザー</th>
+ <th>対応開始バージョン</th>
+ <th>対応内容</th>
+ </tr>
+ <tr>
+ <td rowspan="2">Internet Explorer</td>
+ <td>8.0</td>
+ <td><code>:pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td>9.0</td>
+ <td><code>:pseudo-element ::pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td rowspan="2">Firefox (Gecko)</td>
+ <td>1.0 (1.0)</td>
+ <td><code>:pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td>1.0 (1.5)</td>
+ <td><code>:pseudo-element ::pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td rowspan="2">Opera</td>
+ <td>4.0</td>
+ <td><code>:pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td>7.0</td>
+ <td><code>:pseudo-element ::pseudo-element</code></td>
+ </tr>
+ <tr>
+ <td>Safari (WebKit)</td>
+ <td>1.0 (85)</td>
+ <td><code>:pseudo-element ::pseudo-element</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<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("CSS1")}}</td>
+ <td>{{Spec2("CSS1")}}</td>
+ <td>擬似クラスと擬似要素を定義した。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></li>
+</ul>
--
cgit v1.2.3-54-g00ecf