pseudo‐element

There is another page with same name:
Edit New

擬似要素 (CSS)

[14] 擬似要素は、文書木中で直接的に文書言語で表現されないものを表します。

仕様書

構文

[15] 擬似要素は : を2つ書いた後に名前を続けることによって表します。 >>2

[16] しかし CSS1 と CSS2 で規定されていた4種類の擬似要素については、 : が1つだけであっても利用者エージェントは擬似要素として処理しなければなりません。 >>2 CSS2 までは : は1つだけで擬似クラスと同じ構文でしたが、選択子3以降は擬似クラスと区別して :: に変更されました。

[17] 著者が : 1つの構文を使っても良いとは明記されていませんが (悪いとも明記されていませんが)、どうなのでしょうか。
[18] 選択子3以降で追加された擬似要素は : 1つの構文は認められていません >>2。

[7] : と : や : と擬似要素名の間には注釈を挿入できます。

例:
Firefox 2 (すべて対応) と WinIE 6 (1つ目のみ対応) は仕様書通り解釈します。

[52] 擬似要素は常に選択子の中の最後の単純選択子列の直後に来ます。この単純選択子列の唯一の単純選択子が普遍選択子であれば、 これを省略できるため、単純選択子列が空文字列となり、見かけ上擬似要素だけで構成されるケースもあります。

[53] 例えば

::before
... は普遍選択子が省略されており、
*::before
... と同義です。

妥当性

[20] 擬似要素は、それぞれの定義による構文に一致していなければ非妥当です。

擬似要素の一般化

[19] 選択子3では擬似要素は選択子中に1つだけしか使えません。 選択子の主題を表す (最後の) 単純選択子列の後になければなりません。 >>2

[8] Opera 9 では最後の単純選択子列以外の単純選択子列の最後にも高々1つ擬似要素を指定できます。ただし実際にはレンダリングに反映されないようです。

[6] WebKit では擬似要素の後に擬似クラスを指定することができます。

歴史

環境要素

[43] CSS の初期案では「環境要素 (environment element) 」 としてUI等の特殊な対象を指定する構文がありました。

[45] これはその後擬似要素と呼ばれるようになりました。

CSS1

[47] >>46 では、 >>45 までの擬似要素は削除され、かわりに擬似クラスとして :first-line と :initial が追加されました。

[32] :initial はその後 :first-letter に改称されました。

[49] 擬似クラスと擬似要素は遅くても >>50 の頃には分離されています。

CSS2

[31] CSS2 では :before と :after が追加されました。

選択子3

[25] >>37 より擬似要素は :: ではじまることになりました。

[33] 選択子3では新しい擬似要素は追加されていません。当初は ::selection と ::menu が提案されていましたが、結局削除されています。

XForms

[34] XForms は ::value, ::repeat-index, ::repeat-item の XForms における意味を説明しています。

[35] XForms 1.1 では擬似要素の後に擬似クラスを使った例が示されています (1.0 にはありませんでした)。しかしこれはどの CSS/選択子の仕様でも認められていません。

CSS 生成内容

[41] >>38 は擬似要素を複数指定できるように拡張していました。

[42] しかしこの後の改訂でこの部分の規定は削除されています。

XBL

[39] XBL2 は幾つかの擬似要素を影木の要素に対応付ける方法を提供していました。

[40] 文書木の歴史の項を参照。

メモ

[9] XForms 1.1 ( 版) http://www.w3.org/TR/2009/REC-xforms-20091020/#N90219

[10] Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors ( ( 版)) http://download.oracle.com/docs/cd/E14571_01/apirefs.1111/e15862/toc.htm

[11] IRC logs: freenode / #whatwg / 20110126 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110126#l-607

[12] IRC logs: freenode / #whatwg / 20110726 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110726#l-836

[13] Re: Need a better way to reach into the shadow DOM subtree ( (Dimitri Glazkov 著, 版)) http://lists.w3.org/Archives/Public/www-style/2011Apr/0769.html

関連

[21] SGML にも擬似要素 (票素) という概念がありますが、こちらは CSS の匿名ブロックと似たものです。

擬似要素の一覧

[1]

[51] NOTE-css-potential-19970819 ( ( 版)) http://www.w3.org/TR/NOTE-css-potential-19970819#elementId=1029307

[54] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-pseudo-attribute

[55] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#matching-pseudo-elements

[56] List of Pseudo-Elements to Style Form Controls - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development ( (TJ VanToll 著, 版)) http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/

[57] CSS Pseudo-elements Module Level 4 ( ( 版)) http://dev.w3.org/csswg/css-pseudo/

[58] Styling Form Controls – WebKit ( ( 版)) http://trac.webkit.org/wiki/Styling%20Form%20Controls

[59] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#matching

[3] [css-pseudo] Add another issue about the CSSPseudoElement proposal. · w3c/csswg-drafts@cd4b1a0 ( 版) https://github.com/w3c/csswg-drafts/commit/cd4b1a0ea0f245b19f7f039070bf7d7ea1a08a65

[4] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-pseudo-attribute

[60] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#the-xblpseudo

[61] [css-pseudo][cssom] Link the two competing pseudo element interface p… · w3c/csswg-drafts@35681ac ( 版) https://github.com/w3c/csswg-drafts/commit/35681ac3f007cca4a97b9e1a2106a79b48c041f8

[62] [cssom] Remove Element#pseudo() and PseudoElement · w3c/csswg-drafts@53fe142 ( 版) https://github.com/w3c/csswg-drafts/commit/53fe1426eb63101b087286c65b10a26d9073a943

[63] [cssom] Remove Element#pseudo() and PseudoElement · w3c/csswg-drafts@53fe142 ( 版) https://github.com/w3c/csswg-drafts/commit/53fe1426eb63101b087286c65b10a26d9073a943

[64] Refer to CSS Pseudo spec instead of CSSOM for pseudo element interface · w3c/web-animations@f31f602 ( 版) https://github.com/w3c/web-animations/commit/f31f602cea9a46d950401267c3c9296b6ecf743a

[65] [css-pseudo] CSSPseudoElement and EventTarget (Simon Pieters 著, 版) https://lists.w3.org/Archives/Public/www-style/2016Feb/0142.html

[66] [css-ui] Allowing pseudo-elements on form controls when appearance:none (Tab Atkins Jr. 著, 版) https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html

[67] [cssom-view] Replace PseudoElement with CSSPseudoElement for Geometry… · w3c/csswg-drafts@85f9e4a ( 版) https://github.com/w3c/csswg-drafts/commit/85f9e4af68544e3fd4e7fe472299bae73c1a8f51

[68] [css-forms][css-ui] Styling native components, a proposal (Lea Verou 著, 版) https://lists.w3.org/Archives/Public/www-style/2016Mar/0310.html

[69] [selectors-4] Drop pseudo-elements from <simple-selector> to match de… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/8d2e99ac927f9df55c35cc87d666bd654a4289fb

[70] [selectors] some inconsistent concepts and descriptions · Issue #386 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/386

Updated: