[6] [DFN[[CODE(CSS)@en[[[:active]]]]]] [[擬似クラス]]は、[[活性]]状態にある[[要素]]を表します。 * 仕様書 [REFS[ - [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) - [38] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) - [57] [CITE@en-US[Quirks Mode Standard]] ([TIME[2012-11-13 08:54:35 +09:00]] 版) ]REFS] * 意味 [7] [CODE(CSS)@en[[[:active]]]] [[擬似クラス]]は[[要素]]が[RUBYB[[[活性化]]中]@en[being activated]]の時適用されます。 [SRC[>>5]] [8] 例えば[[利用者]]が[[マウス]]の[[ボタン]]を押してから離すまでの間適用されます。 [SRC[>>5]] [53] [[マウス]]の[[ボタン]]が複数ある場合には、[RUBYB[一次]@en[primary]]活性化ボタン (通常は[[左]]ボタン) やそれと同義のものにのみ適用されます。 [SRC[>>5]] [9] [[文書言語]]や[[実装]]によっては[[活性]]状態となる[[要素]]に制限があるかもしれません。 [SRC[>>5]] [39] 「[[活性化]]中」とは、次の[[要素]]のことをいいます [SRC[>>38]]。 - [40] 次のいずれかに該当する[[要素]]であって、[[利用者]]が[[活性化動作]]を呼び出す意図を示し始めた時から、意図を示すのをやめた時または[[活性化動作]]が実行完了した時の早い方まで -- [41] [CODE(HTMLe)@en[[[a]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの -- [42] [CODE(HTMLe)@en[[[area]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの -- [43] [CODE(HTMLe)@en[[[link]]] [[要素]]で [CODE(HTMLa)@en[[[href]]]] [[属性]]を持つもの -- [44] [CODE(HTMLe)@en[[[button]]]] [[要素]]で[[無効]]でないもの -- [45] [CODE(HTMLe)@en[[[input]]]] [[要素]]であって[[提出ボタン]]、[[画像ボタン]]、[[再設定ボタン]]、 [[ボタン]]のいずれかの状態にあるもの -- [46] [CODE(HTMLe)@en[[[command]]]] [[要素]]で [CODE(HTMLa)@en[[[disabled]]]] [[属性]]を持たないもの -- [47] [[特別に焦点化可能]]な[[要素]] - [48] [[利用者]]が[[指示装置]]で示した[[要素]]であって、[[指示装置]]が「[[押下]]」状態にある間のもの - [49] [CODE(CSS)@en[[[:active]]]] [[擬似クラス]]に[[一致]]している[[子孫]]を持つ[[要素]] [EG[ [50] >>39 の例として、[[鍵盤]]の[[スペース・バー]]を押下することによって[[ボタン]]を押す場合、 [CODE(DOMe)@en[[[keydown]]]] [[事象]]を受け取ってから [CODE(DOMe)@en[[[keyup]]]] [[事象]]を受け取るまでの間、 [CODE(CSS)@en[[[:active]]]] に[[一致]]します。 [SRC[>>38]] [51] >>48 の例として、[[マウス]]の[[ボタン]]が押されてから離されるまでの間、 [CODE(CSS)@en[[[:active]]]] に[[一致]]します。 [SRC[>>38]] ]EG] * [CODE(CSS)@en[:active]] と [CODE(CSS)@en[:hover]] の奇癖 [58] [DFN[[RUBYB[[CODE(CSS)@en[:active]] と [CODE(CSS)@en[:hover]] の奇癖]@en[the :active and :hover quirk]]]]は、 [[奇癖モード]]で適用される規定であり、次の条件を満たす[[結合選択子]]は [CODE(CSS)@en[[[:any-link]]]] に[[一致]]''しない''[[要素]]に[[一致]]しないこととしなくては[['''なりません''']] [SRC[>>57]]。 [FIG[ - [59] [CODE(CSS)@en[[[:active]]]] または [CODE(CSS)@en[[[:hover]]]] を使っている - [60] 次のいずれも使っていない -- [61] [[型選択子]] -- [62] [[属性選択子]] -- [63] [[ID選択子]] -- [64] [[クラス選択子]] -- [65] [CODE(CSS)@en[[[:active]]]], [CODE(CSS)@en[[[:hover]]]] 以外の[[擬似クラス]] -- [66] [[擬似要素]] - [67] [[関数的擬似クラス]]・[[関数的擬似要素]]の一部ではない ]FIG] ;; [68] これは初期の [[CSS]] の実装が [CODE(CSS)@en[[[:active]]]] や [CODE(CSS)@en[[[:hover]]]] を[[リンク]][[要素]]にのみ適用させており、それを当てにした[[スタイル・シート]]を使っている[[文書]]との互換性のために必要となった規定です。 * 歴史 ** CSS1 [REFS[ - [36] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-10-07 10:35:41 +09:00]] 版) - [18] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) ]REFS] [37] [CODE(CSS)@en[[[:active]]]] は >>36 で追加されました。 [19] [[CSS1]] では [CODE(CSS)@en[[[:link]]]] や [CODE(CSS)@en[[[:visited]]]] と排他的であるとされていました。 [20] [[CSS1]] では [CODE(HTMLe)@en[[[a]]]] [[要素]]の [CODE(HTMLa)@en[[[href]]]] [[属性]]があるものに適用されるとされていました。 ** CSS2 [REFS[ - [35] [CITE@en[Selectors]] ([TIME[1998-03-25 23:00:31 +09:00]] 版) - [15] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [16] >>35 で [CODE(CSS)@en[[[:active]]]] は [CODE(CSS)@en[[[:link]]]] や [CODE(CSS)@en[[[:visited]]]] とは独立して適用されるように改められました。 [17] [[CSS2]] で [CODE(CSS)@en[[[:active]]]] は[[リンク]]以外にも適用されるように改められました。 ** CSS UI [24] 古い [[CSS UI]] の仕様は [CODE(CSS)@en['[[user-input]]: enabled']] な[[要素]]にだけ [CODE(CSS)@en[[[:active]]]] が適用される、と改訂していましたが、この仕様は放棄されて現在に引き継がれていないようです。 >>32 の次の [[CR]] で削除されています。 [REFS[ - [25] [CITE[User Interface Enhancements]] ([TIME[1999-09-16 05:07:02 +09:00]] 版) - [26] [CITE@en[User Interface for CSS3]] ([TIME[2000-06-23 03:09:21 +09:00]] 版) - [29] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-04-11 01:57:05 +09:00]] 版) - [31] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-10-06 02:05:50 +09:00]] 版) - [32] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2001-01-29 23:57:00 +09:00]] 版) ]REFS] [21] >>8, >>53 の規定は元々 [[CSS]] に含まれておらず、 >>23 より [[CSS UI]] 仕様に差分として含まれていましたが、 後に[[選択子3]]仕様書に取り込まれています (>>33)。 ;; [34] 現在でも >>22 に残っていますが、そのうち削除されるのではないでしょうか。 [TIME[2011-10-23T09:53:02.200Z]] ;; [55] しかし >>54 にも >>53 は残っています。 [REFS[ - [22] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2011-09-29 17:32:08 +09:00]] 版) - [23] [CITE@en[CSS3 Basic User Interface Module]] ([[Tantek Çelik]] 著, [TIME[2004-05-12 02:17:47 +09:00]] 版) - [54] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版) ]REFS] [30] [[Web Controls 1.0]] は [[CSS UI]] を更に拡張して[[Webアプリケーション]]が状態を変化させられるような構想を持っていました。 [REFS[ - [28] [CITE@en-GB-hixie[Web Applications Markup Language 1.0]] ( ([TIME[2004-04-08 02:39:12 +09:00]] 版)) - [27] [CITE@en-GB-hixie[Web Controls 1.0]] ( ([TIME[2004-11-09 08:49:52 +09:00]] 版)) ]REFS] ** 選択子3 [REFS[ - [33] [CITE@en[Selectors Level 3]] ([TIME[2009-03-10 13:17:53 +09:00]] 版) - [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] [10] [CODE(CSS)@en[[[:active]]]] な[[要素]]の[[親要素]]もまた [CODE(CSS)@en[[[:active]]]] な状態かどうか、[[選択子]]の仕様としては定義しないとされています。 [SRC[>>5]] [11] しかし実際には多くの [[Webブラウザー]]で[[親要素]]もまた [CODE(CSS)@en[[[:active]]]] となるため、[[著者]]もそれを前提にしているようです。これを踏まえて後に [[HTML]] の仕様で正確な動作が規定されています (>>39)。 ** HTML [FIG[ [FIGCAPTION[ [2] [CITE[IRC logs: freenode / #whatwg / 20101228]] ( ([TIME[2011-01-07 01:10:29 +09:00]] 版)) ]FIGCAPTION] > - [20:51] Hixie: Any reason why the section on CSS pseudoclasses only mentions a restricted list of elements that can match :active, when in practice all browsers allow all elements to be :active while they are clicked? - [21:38] TabAtkins: iirc it was based on a request of the csswg, but honestly i don't recall - [21:38] well - [22:08] Hixie: I suspect it was a request from fantasai, since she dislikes the idea of arbitrary elements being activatable. - [22:09] Hixie: In any case, all browsers allow all elements to be :active. - [22:09] I can file a bug if it would help. - [22:12] TabAtkins: yeah, file a bug or send e-mail. IE didn't used to do this like the others. - [22:13] Yeah, but they didn't use to do :hover on non-links either. - [22:13] Will file. - [22:13] so? - [22:13] we're talking about :active, not :hover :-) - [22:13] if we do change this we'll have to define what :active means - [22:13] Right, but they're done through similar events, and conceivably are handled similarly in the browser. - [22:13] and how to do it from the keyboard - [22:14] You still can't activate arbitrary elements from the keyboard, unless they're tab-able or something. - [22:15] that seems suboptimal - [22:18] Huh. IE8 & 9 let any element be activated, but only the target of the click gets :active, not everything up the chain. ]FIG] [REFS[ - [3] [CITE@en[Web Applications 1.0 r5881 Define that :active works between mousedown and mouseup.]] ( ([TIME[2011-02-12 09:33:00 +09:00]] 版)) - [4] [CITE@en[Web Applications 1.0 r5897 Rephrase the :active prose to not suggest that the Selectors spec is wrong.]] ( ([TIME[2011-02-17 04:40:00 +09:00]] 版)) - [38] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) ]REFS] [52] [[選択子3]]の規定は曖昧さが多く残っていましたが、 [[HTML]] の仕様書はこれをより厳密に、 実際の [[Webブラウザー]]の挙動に近い形で規定しています。 はじめこれは[[意図的違反]]とされていましたが (>>3)、 [[CSS WG]] 方面から抗議があって[[意図的違反]]では無いような表現に改められています (>>4)。 * 実装 [1] [CITE@ja[2009年5月 - Blog - EOF]] ([[Taku Watabe]] 著, [TIME[2009-05-16 00:11:32 +09:00]] 版) >IE8 と Opera 9.5 以降で :active 疑似クラスは親要素に伝搬しない * 不思議解釈 [14] [[HTML]] の[[属性名]]に引きずられて [CODE(CSS)@en[[[:alink]]]] [[擬似クラス]]が存在すると述べている解説もあります。 * 関連 [12] [CODE(CSS)@en[[[:link]]]] や [CODE(CSS)@en[[[:visited]]]] や [CODE(CSS)@en[[[:hover]]]] とは互いに排他的では''ありません''。同時に適用されることもあります。しかし古い実装はそうではないこともあります。 [13] 元々 [[HTML]] の [CODE(HTMLa)@en[[[alink]]]] [[属性]]に相当する機能として [[CSS]] に取り入れられたようです。 [56] [CITE[Quirks Mode Standard]] ( ([TIME[2012-02-09 23:33:50 +09:00]] 版))