CSSPseudoElement インターフェイスの記事を新規翻訳

files/ja/web/api/csspseudoelement/element/index.md

@@ -0,0 +1,44 @@
+---
+title: "CSSPseudoElement: element プロパティ"
+short-title: element
+slug: Web/API/CSSPseudoElement/element
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`element`** は {{DOMxRef('CSSPseudoElement')}} インターフェイスの読み取り専用のプロパティで、擬似要素の元要素、言い換えれば親要素への参照を返します。
+
+## 値
+
+この擬似要素の元要素を表す {{DOMxRef('Element')}} です。
+
+## 例
+
+下記の例は、 `CSSPseudoElement.element` と {{DOMxRef('Element.pseudo()')}} の関係を示しています。
+
+```js
+const myElement = document.querySelector("q");
+const cssPseudoElement = myElement.pseudo("::after");
+const originatingElement = cssPseudoElement.element;
+
+console.log(myElement === originatingElement); // true を出力
+console.log(myElement.parentElement === originatingElement); // false を出力
+console.log(myElement.lastElementChild === cssPseudoElement); // false を出力
+console.log(myElement.lastChild === cssPseudoElement); // false を出力
+console.log(myElement.nextElementSibling === cssPseudoElement); // false を出力
+console.log(myElement.nextSibling === cssPseudoElement); // false を出力
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef('Element.pseudo()')}}

files/ja/web/api/csspseudoelement/index.md

@@ -0,0 +1,57 @@
+---
+title: CSSPseudoElement
+slug: Web/API/CSSPseudoElement
+l10n:
+  sourceCommit: b280ea1234452ff553caa466bf532a66ba51db01
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`CSSPseudoElement`** インターフェイスは、イベントの対象としたり{{DOMxRef('Web Animations API', 'ウェブアニメーション API', '', 'true')}} を使用してアニメーションさせたりする擬似要素を表します。このインターフェイスのインスタンスは {{DOMxRef('Element.pseudo()')}} を呼び出すことで取得できます。
+
+{{InheritanceDiagram}}
+
+## インスタンスプロパティ
+
+- {{DOMxRef('CSSPseudoElement.element')}} {{Experimental_Inline}} {{ReadOnlyInline}}
+  - : 擬似要素の元／親要素 ({{DOMxRef('Element')}}) を返します。
+- {{DOMxRef('CSSPseudoElement.type')}} {{Experimental_Inline}} {{ReadOnlyInline}}
+  - : 擬似要素セレクターを文字列で返します。
+
+## インスタンスプロパティ
+
+_`CSSPseudoElement` は {{DOMxRef('EventTarget')}} から派生しているため、以下のメソッドを継承しています。_
+
+- {{domxref("EventTarget.addEventListener()")}}
+  - : 擬似要素に固有のイベント型のイベントハンドラーを登録します。
+- {{domxref("EventTarget.dispatchEvent()")}}
+  - : この擬似要素にイベントを配信します。
+- {{domxref("EventTarget.removeEventListener()")}}
+  - : 擬似要素からイベントリスナーを除去します。
+
+## 例
+
+### Element.pseudo を使用した基本的な例
+
+擬似要素を用いると、ほとんどの現代のブラウザーは {{HTMLElement('q')}} 要素内のテキストに引用符を自動的に追加します。（古いブラウザーで引用符を追加するにはスタイルルールが必要な場合があります。）下記ノ例は、冒頭の引用符を表す `CSSPseudoElement` オブジェクトの基本的なプロパティを示しています。
+
+```js
+const element = document.querySelector("q");
+const cssPseudoElement = element.pseudo("::before");
+console.log(cssPseudoElement.element); // [object HTMLQuoteElement] を出力
+console.log(cssPseudoElement.type); // '::before' を出力
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef('Element.pseudo()')}}
+- {{DOMxRef('Web Animations API', 'ウェブアニメーション API', '', 'true')}}
+- {{DOMxRef('Element.animate()')}}

files/ja/web/api/csspseudoelement/type/index.md

@@ -0,0 +1,45 @@
+---
+title: "CSSPseudoElement: type プロパティ"
+short-title: type
+slug: Web/API/CSSPseudoElement/type
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`type`** は {{DOMxRef('CSSPseudoElement')}} インターフェイスの読み取り専用プロパティで、擬似要素の型を [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors#pseudo-elements)の形の文字列で表します。
+
+## 値
+
+以下の値のいずれかを格納する文字列です。
+
+- {{CSSxRef('::before', '"::before"')}}
+- {{CSSxRef('::after', '"::after"')}}
+- {{CSSxRef('::marker', '"::marker"')}}
+
+## 例
+
+下記の例は、 `CSSPseudoElement.type` と {{DOMxRef('Element.pseudo()')}} の関係を示しています。
+
+```js
+const myElement = document.querySelector("q");
+const mySelector = "::after";
+const cssPseudoElement = myElement.pseudo(mySelector);
+const typeOfPseudoElement = cssPseudoElement.type;
+
+console.log(mySelector === typeOfPseudoElement); // true を出力
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef('Element.pseudo()')}}
+- [標準的な擬似要素の索引](/ja/docs/Web/CSS/Pseudo-elements#標準的な擬似要素の索引)