[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つ目のみ対応) は仕様書通り解釈します。 * 妥当性 [20] [[擬似要素]]は、それぞれの定義による構文に一致していなければ[[非妥当]]です。 * 擬似要素の一般化 [19] [[選択子3]]では[[擬似要素]]は[[選択子]]中に1つだけしか使えません。 [[選択子の主題]]を表す (最後の) [[単純選択子列]]の後になければ[['''なりません''']]。 [SRC[>>2]] [8] [[Opera]] 9 では最後の[[単純選択子列]]以外の[[単純選択子列]]の最後にも高々1つ[[擬似要素]]を指定できます。ただし実際には[[レンダリング]]に反映されないようです。 [6] [[WebKit]] では[[擬似要素]]の後に[[擬似クラス]]を指定することができます。 * 歴史 ** CSS1 [REFS[ - [26] [CITE[Cascading Style Sheets, level 1]] -- [27] -- [29] '''''' -- [28] -- [30] ]REFS] [32] [[CSS1]] では [CODE(CSS)@en[[[:first-letter]]]] と [CODE(CSS)@en[[[:first-line]]]] が定義されました。 ** 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 生成内容 @@ ** XBL @@ ** メモ - [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]]]] , , ,[[Gecko]] ,[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[[[::-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)[[[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]]