Looking for css Answers? Try Ask4KnowledgeBase
Looking for css Keywords? Try Ask4Keywords

CSS擬似要素


前書き

擬似クラスは擬似クラスと同じようにCSSセレクタに追加されますが、特別な状態を記述するのではなく、html要素の特定の部分をスコープしてスタイル設定することができます。

たとえば、:: first-letter擬似要素は、セレクタで指定されたブロック要素の最初の文字のみを対象とします。

構文

  • selector :: pseudo-element {プロパティ:値}

パラメーター

擬似要素説明
::after 要素の内容の後に内容を挿入する
::before 要素の内容の前に内容を挿入する
::first-letter 各要素の最初の文字を選択します。
::first-line 各要素の最初の行を選択します。
::selection ユーザーが選択した要素の部分と一致します。
::backdrop 最上位レイヤーのスタック内の要素の基礎となるドキュメントを隠す背景を作成するために使用されます
::placeholder フォーム要素のプレースホルダテキストをスタイルすることができます(実験的)
::marker 特定の要素にリストスタイルの属性を適用する場合(実験的)
::spelling-error ブラウザが間違って綴られたテキストセグメントを表します(実験的)。
::grammar-error ブラウザが文法的に正しくないと判断したテキストセグメントを表します(実験的)。

備考

  • 時にはあなたは、二重のコロン(表示されます:: ()の代わりに、1つだけ: )。これは、擬似要素から擬似クラスを分離する方法ですが、Internet Explorer 8のような一部の古いブラウザでは単一のコロンをサポートしています( :疑似要素のため)。

  • セレクタでは1つの擬似要素しか使用できません。ステートメント内の単純なセレクタの後に表示する必要があります。

  • 疑似要素はDOMの一部ではないため、 :hoverやその他のユーザーイベントによってターゲティングすることはできません。

擬似要素 関連する例