CSSPseudoElement
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSSPseudoElement インターフェイスは、イベントの対象としたりウェブアニメーション API を使用してアニメーションさせたりする擬似要素を表します。このインターフェイスのインスタンスは Element.pseudo() を呼び出すことで取得できます。
インスタンスプロパティ
CSSPseudoElement.elementExperimental 読取専用-
擬似要素の元／親要素 (
Element) を返します。 CSSPseudoElement.typeExperimental 読取専用-
擬似要素セレクターを文字列で返します。
インスタンスメソッド
CSSPseudoElement は EventTarget から派生しているため、以下のメソッドを継承しています。
EventTarget.addEventListener()-
擬似要素に固有のイベント型のイベントハンドラーを登録します。
EventTarget.dispatchEvent()-
この擬似要素にイベントを配信します。
EventTarget.removeEventListener()-
擬似要素からイベントリスナーを除去します。
例
Element.pseudo を使用した基本的な例
擬似要素を用いると、ほとんどの現代のブラウザーは <q> 要素内のテキストに引用符を自動的に追加します。（古いブラウザーで引用符を追加するにはスタイルルールが必要な場合があります。）下記ノ例は、冒頭の引用符を表す CSSPseudoElement オブジェクトの基本的なプロパティを示しています。
js
const element = document.querySelector("q");
const cssPseudoElement = element.pseudo("::before");
console.log(cssPseudoElement.element); // [object HTMLQuoteElement] を出力
console.log(cssPseudoElement.type); // '::before' を出力
仕様書
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # CSSPseudoElement-interface |
ブラウザーの互換性
BCD tables only load in the browser