[14] [[擬似要素]]は、[[文書木]]中で直接的に[[文書言語]]で表現されないものを表します。 * 仕様書 [REFS[ - [2] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] * 構文 [15] [[擬似要素]]は [CODE(CSS)@en[[[:]]]] を2つ書いた後に[[名前]]を続けることによって表します。 [SRC[>>2]] [16] しかし [[CSS1]] と [[CSS2]] で規定されていた4種類の[[擬似要素]]については、 [CODE(CSS)[[[:]]]] が1つだけであっても[[利用者エージェント]]は[[擬似要素]]として処理しなければ[['''なりません''']]。 [SRC[>>2]] [[CSS2]] までは [CODE(CSS)[[[:]]]] は1つだけで[[擬似クラス]]と同じ構文でしたが、[[選択子3]]以降は[[擬似クラス]]と区別して [CODE(CSS)[[[::]]]] に変更されました。 ;; [17] [[著者]]が [CODE(CSS)[[[:]]]] 1つの構文を使っても良いとは明記されていませんが (悪いとも明記されていませんが)、どうなのでしょうか。 ;; [18] [[選択子3]]以降で追加された[[擬似要素]]は [CODE(CSS)[[[:]]]] 1つの構文は認められていません [SRC[>>2]]。 [7] [CODE(CSS)@en[[[:]]]] と [CODE(CSS)@en[[[:]]]] や [CODE(CSS)@en[[[:]]]] と[[擬似要素]]名の間には[[注釈]]を挿入できます。 ;; 例: [REFS[ - - - ]REFS] [[Firefox]] 2 (すべて対応) と [[WinIE 6]] (1つ目のみ対応) は仕様書通り解釈します。 [52] [[擬似要素]]は常に[[選択子]]の中の最後の[[単純選択子列]]の直後に来ます。この[[単純選択子列]]の唯一の[[単純選択子]]が[[普遍選択子]]であれば、 これを省略できるため、[[単純選択子列]]が[[空文字列]]となり、見かけ上[[擬似要素]]だけで構成されるケースもあります。 [EG[ [53] 例えば [PRE(CSS example code)[ ::before ]PRE] ... は[[普遍選択子]]が省略されており、 [PRE(CSS example code)[ *::before ]PRE] ... と同義です。 ]EG] * 妥当性 [20] [[擬似要素]]は、それぞれの定義による構文に一致していなければ[[非妥当]]です。 * 擬似要素の一般化 [19] [[選択子3]]では[[擬似要素]]は[[選択子]]中に1つだけしか使えません。 [[選択子の主題]]を表す (最後の) [[単純選択子列]]の後になければ[['''なりません''']]。 [SRC[>>2]] [8] [[Opera]] 9 では最後の[[単純選択子列]]以外の[[単純選択子列]]の最後にも高々1つ[[擬似要素]]を指定できます。ただし実際には[[レンダリング]]に反映されないようです。 [6] [[WebKit]] では[[擬似要素]]の後に[[擬似クラス]]を指定することができます。 * 歴史 ** 環境要素 [REFS[ - [5] [CITE[Cascading Style Sheets: a draft specification]] ( ([TIME[1995-08-11 17:13:22 +09:00]] 版)) - [6] [CITE[Cascading Style Sheets: a draft specification]] ( ([TIME[1995-10-07 10:35:41 +09:00]] 版)) - [7] [CITE[Cascading Style Sheets: a draft specification]] ( ([TIME[1995-11-02 03:04:18 +09:00]] 版)) ]REFS] [43] [[CSS]] の初期案では「[RUBYB[[[環境要素]]]@en[environment element]]」 として[[UI]]等の特殊な対象を指定する構文がありました。 [REFS[ - [44] [CITE[Cascading Style Sheets, level 1]] ([TIME[1995-11-18 13:20:39 +09:00]] 版) ]REFS] [45] これはその後[[擬似要素]]と呼ばれるようになりました。 ** CSS1 [REFS[ - [46] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) - [50] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:41:01 +09:00]] 版) - [48] [CITE[Cascading Style Sheets, level 1]] ([TIME[2000-09-23 08:23:45 +09:00]] 版) - [26] [CITE[Cascading Style Sheets, level 1]] -- [27] -- [29] '''''' -- [28] -- [30] ]REFS] [47] >>46 では、 >>45 までの[[擬似要素]]は削除され、かわりに[[擬似クラス]]として [CODE(CSS)@en[[[:first-line]]]] と [CODE(CSS)@en[[[:initial]]]] が追加されました。 [32] [CODE(CSS)@en[[[:initial]]]] はその後 [CODE(CSS)@en[[[:first-letter]]]] に改称されました。 [49] [[擬似クラス]]と[[擬似要素]]は遅くても >>50 の頃には分離されています。 ** CSS2 [REFS[ - [22] [CITE@en[Selectors]] -- [23] -- [24] '''''' ]REFS] [31] [[CSS2]] では [CODE(CSS)@en[[[:before]]]] と [CODE(CSS)@en[[[:after]]]] が追加されました。 ** 選択子3 [REFS[ - [37] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-10-06 02:05:50 +09:00]] 版) ]REFS] [25] >>37 より[[擬似要素]]は [CODE(CSS)[[[::]]]] ではじまることになりました。 [33] [[選択子3]]では新しい[[擬似要素]]は追加されていません。当初は [CODE(CSS)@en[[[::selection]]]] と [CODE(CSS)@en[[[::menu]]]] が提案されていましたが、結局削除されています。 ** XForms [34] [[XForms]] は [CODE(CSS)@en[[[::value]]]], [CODE(CSS)@en[[[::repeat-index]]]], [CODE(CSS)@en[[[::repeat-item]]]] の [[XForms]] における意味を説明しています。 [35] [[XForms 1.1]] では[[擬似要素]]の後に[[擬似クラス]]を使った例が示されています [WEAK[(1.0 にはありませんでした)]]。しかしこれはどの [[CSS]]/[[選択子]]の仕様でも認められていません。 [REFS[ - [36] [CITE@EN[XForms 1.1]] ([TIME[2010-08-13 07:45:33 +09:00]] 版) ]REFS] ** CSS 生成内容 [REFS[ - [38] [CITE@en[CSS3 Generated and Replaced Content Module]] ([TIME[2003-05-15 21:54:58 +09:00]] 版) ]REFS] [41] >>38 は[[擬似要素]]を複数指定できるように拡張していました。 ;; [42] しかしこの後の改訂でこの部分の規定は削除されています。 ** XBL [39] [[XBL2]] は幾つかの[[擬似要素]]を[[影木]]の[[要素]]に対応付ける方法を提供していました。 ;; [40] [[文書木]]の歴史の項を参照。 ** メモ - [CITE@en[Selectors]] -- [CSECTION@en[7. Pseudo-elements]] - [CITE@en[CSS3 Basic User Interface Module]] -- [CSECTION@en[4.2. User interface element fragments: pseudo-elements]] - [XForms] [CSECTION@en[F XForms and Styling (Non-Normative)]] ([[W3C]][[勧告]] ([[参考]])) -- - [Prince] [CITE@en[Prince: CSS Selectors]] [9] [CITE@EN[XForms 1.1]] ([TIME[2009-10-20 22:51:54 +09:00]] 版) [10] [CITE@en-US[Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors]] ( ([TIME[2010-03-03 23:52:42 +09:00]] 版)) [11] [CITE[IRC logs: freenode / #whatwg / 20110126]] ( ([TIME[2011-03-06 11:15:33 +09:00]] 版)) [12] [CITE[IRC logs: freenode / #whatwg / 20110726]] ( ([TIME[2011-08-07 10:33:25 +09:00]] 版)) [13] [CITE@en[Re: Need a better way to reach into the shadow DOM subtree]] ( ([[Dimitri Glazkov]] 著, [TIME[2011-04-28 05:33:44 +09:00]] 版)) * 関連 [21] [[SGML]] にも[[擬似要素]] ([[票素]]) という概念がありますが、こちらは [[CSS]] の[[匿名ブロック]]と似たものです。 * 擬似要素の一覧 [1] - [CODE(CSS)@en[[[::after]]]] - [CODE(CSS)@en[[[::alternate]]]] - [CODE(CSS)@en[[[::-moz-anonymous-block]]]] - [CODE(CSS)@en[[[::-moz-anonymous-positioned-block]]]] - [CODE(CSS)@en[[[::before]]]] - [CODE(CSS)@en[[[::-moz-button-content]]]] ,[CODE(CSS)[[[-moz-buttonlabel]]]] ,[CODE(CSS)[[[-moz-canvas]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-cell-content]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-checkbox]]]] - [CODE(CSS)@en[[[::choices]]]] - [CODE(CSS)[[[::-moz-column-content]]]] - [CODE(CSS)@en[[[::control]]]] - [CODE(CSS)[[[::-moz-display-comboboxcontrol-frame]]]] - [CODE(CSS)@en[[[::cue]]]] ,[CODE(CSS)@en[:[[-moz-drop-marker]]]] ,[CODE(CSS)[::[[-moz-dropdown-list]]]] ,[CODE(CSS)[[[-moz-dummy-option]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-fieldset-content]]]] , , ,[[Gecko]] ,[CODE(CSS)@en[::[[-webkit-file-upload-button]]]] ,[CODE(CSS)[[[first-letter]]]] ,最初の[[文字]] ,W3C 勧告 ,[[CSS 2]] ,[CODE(CSS)@en[::[[first-letter]]]] ,最初の[[文字]] ,[[W3C]] [[勧告候補]] ,[Selectors] ,[CODE(CSS)[[[first-line]]]] ,最初の[[行]] ,W3C 勧告 ,[[CSS 2]] ,[CODE(CSS)@en[::[[first-line]]]] ,最初の[[行]] ,[[W3C]] [[勧告候補]] ,[Selectors] ,[CODE(CSS)[[[-moz-first-line-fixup]]]] ,[CODE(CSS)[::[[-moz-focus-inner]]]] , , ,[[Gecko]] ,[CODE(CSS)[::[[-moz-focus-outer]]]] , , ,[[Gecko]] ,[CODE(CSS)@en[::[[footnote-call]]]] , ,非標準 ,[Prince] ,[CODE(CSS)@en[::[[footnote-marker]]]] , ,非標準 ,[Prince] ,[CODE(CSS)[[[-moz-frameset-blank]]]] ,[CODE(CSS)[[[-moz-gc-wrapper-block]]]] , , ,[[Gecko]] ,[CODE(CSS)[::[[-moz-hframeset-border]]]] - [CODE(CSS)@en[[[::icon]]]] - [CODE(CSS)@en[[[:initial]]]] - [CODE(CSS)@en[[[::-webkit-input-placeholder]]]] - [CODE(CSS)@en[[[::label]]]] - [CODE(CSS)@en[[[::-moz-line-frame]]]] - [CODE(CSS)@en[[[::line-marker]]]] ,[CODE(CSS)[[[-moz-list-bullet]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-list-number]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-math-anonymous]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-math-inline]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-math-stretchy]]]] , , ,[[Gecko]] - [CODE(CSS)@en[[[::marker]]]] ,[CODE(CSS)@en[::[[-webkit-media-controls-fullscreen-button]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-mute-button]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-play-button]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-panel]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-time-display]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-timeline]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-seek-back-button]]]],,,[[WebKit]] ,[CODE(CSS)@en[::[[-webkit-media-controls-seek-forward-button]]]],,,[[WebKit]] - [CODE(CSS)@en[[[:menu]]]] - [CODE(CSS)@en[[[::menu]]]] - [CODE(CSS)@en[[[::-moz-non-element]]]] - [CODE(CSS)@en[[[::outside]]]] ,[CODE(CSS)[[[-moz-page]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-pagebreak]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-pagecontent]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-page-sequence]]]] , , ,[[Gecko]] ,[CODE(CSS)@en[:[[prompt]]]] , ,非標準 ,[CODE(CSS)[[[-moz-radio]]]] ,[CODE(CSS)@en[::[[repeat-index]]]] , ,[[W3C]] [[勧告候補]] ,"[CSS3 UI], [XForms]" ,[CODE(CSS)@en[::[[repeat-item]]]] , ,[[W3C]] [[勧告候補]] ,"[CSS3 UI], [XForms]" ,[CODE(CSS)[[[-moz-scrolled-canvas]]]] , , ,[[Gecko]] ,[CODE(CSS)@en[::[[-moz-scrolled-content]]]] ,[[スクロール棒]]中にある[[匿名箱]] , ,[[Gecko]] ,[CODE(CSS)[[[-moz-scrolled-page-sequence]]]] , , ,[[Gecko]] ,[CODE(CSS)@en[::[[-webkit-search-cancel-button]]]] ,[CODE(CSS)@en[::[[-webkit-search-decoration]]]] ,[CODE(CSS)@en[::[[-webkit-search-results-button]]]] ,[CODE(CSS)@en[::[[-webkit-search-results-decoration]]]] - [CODE(CSS)@en[[[::-moz-select-scrolled-content]]]] - [CODE(CSS)@en[[[:selection]]]] - [CODE(CSS)@en[[[::selection]]]] - [CODE(CSS)@en[[[::-moz-selection]]]] ,[CODE(CSS)@en[::[[-moz-singleline-textcontrol-frame]]]]] ,[CODE(CSS)@en[::[[-webkit-slider-thumb]]]] ,[CODE(CSS)[[[-moz-table]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-cell]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-column]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-column-group]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-outer]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-row]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-table-row-group]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-tree-cell]]]] ,[CODE(CSS)[[[-moz-tree-cell-text]]]] ,[CODE(CSS)[[[-moz-tree-checkbox]]]] ,[CODE(CSS)[[[-moz-tree-column]]]] ,[CODE(CSS)[[[-moz-tree-drop-feedback]]]] ,[CODE(CSS)[[[-moz-tree-image]]]] ,[CODE(CSS)[[[-moz-tree-indentation]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-tree-line]]]] ,[CODE(CSS)[[[-moz-tree-progressmeter]]]] ,[CODE(CSS)[[[-moz-tree-row]]]] ,[CODE(CSS)[[[-moz-tree-separator]]]] ,[CODE(CSS)[[[-moz-tree-twisty]]]] - [CODE(CSS)@en[[[::-ten-truncate]]]] ,[CODE(CSS)[[[unknown]]]] ,未対応の擬似要素・[[擬似級]] ,非標準 ,[[WinIE]] ,[CODE(CSS)@en[::[[value]]]] , ,[[W3C]] [[勧告候補]] ,"[CSS3 UI], [XForms]" ,[CODE(CSS)[::[[-moz-vframeset-border]]]] ,[CODE(CSS)[[[-moz-viewport]]]] , , ,[[Gecko]] ,[CODE(CSS)[[[-moz-viewport-scroll]]]] , , ,[[Gecko]] [51] [CITE[NOTE-css-potential-19970819]] ( ([TIME[2000-03-13 23:37:56 +09:00]] 版)) [54] [CITE@en-US[XBL 2.0]] ( ([TIME[2012-05-03 02:23:03 +09:00]] 版)) [55] [CITE@en-US[XBL 2.0]] ( ([TIME[2012-05-03 02:23:03 +09:00]] 版)) [56] [CITE@en[List of Pseudo-Elements to Style Form Controls - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development]] ( ([[TJ VanToll]] 著, [TIME[2013-04-20 22:47:07 +09:00]] 版)) [57] [CITE@en[CSS Pseudo-elements Module Level 4]] ( ([TIME[2013-05-03 17:47:44 +09:00]] 版)) [58] [CITE[Styling Form Controls – WebKit]] ( ([TIME[2013-12-06 22:34:07 +09:00]] 版)) [59] [CITE@en-US[XML Binding Language (XBL) 2.0]] ( ([TIME[2007-03-16 22:20:16 +09:00]] 版)) [3] [CITE@en[''''''[''''''css-pseudo'''''']'''''' Add another issue about the CSSPseudoElement proposal. · w3c/csswg-drafts@cd4b1a0]] ([TIME[2015-12-12 10:56:00 +09:00]] 版) [4] [CITE@en-US[XBL 2.0]] ( ([TIME[2012-05-03 02:23:03 +09:00]] 版)) [60] [CITE@en-US[XML Binding Language (XBL) 2.0]] ( ([TIME[2007-03-16 22:20:16 +09:00]] 版)) [61] [CITE@en[''''''[''''''css-pseudo'''''']''''''''''''[''''''cssom'''''']'''''' Link the two competing pseudo element interface p… · w3c/csswg-drafts@35681ac]] ([TIME[2015-12-12 10:55:30 +09:00]] 版) [62] [CITE@en[''''''[''''''cssom'''''']'''''' Remove Element#pseudo() and PseudoElement · w3c/csswg-drafts@53fe142]] ([TIME[2016-02-16 11:24:07 +09:00]] 版) [63] [CITE@en[''''''[''''''cssom'''''']'''''' Remove Element#pseudo() and PseudoElement · w3c/csswg-drafts@53fe142]] ([TIME[2016-02-16 11:24:13 +09:00]] 版) [64] [CITE@en[Refer to CSS Pseudo spec instead of CSSOM for pseudo element interface · w3c/web-animations@f31f602]] ([TIME[2016-02-17 14:43:14 +09:00]] 版) [65] [CITE@en[''''''[''''''css-pseudo'''''']'''''' CSSPseudoElement and EventTarget]] ([[Simon Pieters]] 著, [TIME[2016-02-16 22:05:53 +09:00]] 版) [66] [CITE@en[''''''[''''''css-ui'''''']'''''' Allowing pseudo-elements on form controls when appearance:none]] ([[Tab Atkins Jr.]] 著, [TIME[2016-03-11 09:23:42 +09:00]] 版) [67] [CITE@en[''''''[''''''cssom-view'''''']'''''' Replace PseudoElement with CSSPseudoElement for Geometry… · w3c/csswg-drafts@85f9e4a]] ([TIME[2016-03-15 12:11:02 +09:00]] 版) [68] [CITE@en[''''''[''''''css-forms'''''']''''''''''''[''''''css-ui'''''']'''''' Styling native components, a proposal]] ([[Lea Verou]] 著, [TIME[2016-03-22 11:33:41 +09:00]] 版) [69] [CITE@en['''['''selectors-4''']''' Drop pseudo-elements from to match de…]] ([[fantasai]]著, [TIME[2018-01-01 20:40:03 +09:00]]) [70] [CITE@en['''['''selectors''']''' some inconsistent concepts and descriptions · Issue #386 · w3c/csswg-drafts]] ([TIME[2018-05-05 12:00:22 +09:00]])