Edit

Page

Page title:

Page body:

[6] [DFN[[CODE(CSS)@en[[[:active]]]]]] [[擬似クラス]]は、[[活性]]状態にある[[要素]]を表します。

* 仕様書

[REFS[
- [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act>
- [38] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#pseudo-classes>
- [57] [CITE@en-US[Quirks Mode Standard]] ([TIME[2012-11-13 08:54:35 +09:00]] 版) <http://quirks.spec.whatwg.org/#the-:active-and-:hover-quirk>
]REFS]

* 意味

[7] [CODE(CSS)@en[[[:active]]]] [[擬似クラス]]は[[要素]]が[DFN[[RUBYB[[[活性化中]]]@en[being activated]]]]の時適用されます。 [SRC[>>5]]

[EG[
[8] 例えば[[利用者]]が[[マウス]]の[[ボタン]]を押してから離すまでの間適用されます。 [SRC[>>5]]

[53] [[マウス]]の[[ボタン]]が複数ある場合には、[RUBYB[一次]@en[primary]]活性化ボタン (通常は[[左]]ボタン)
やそれと同義のものにのみ適用されます。 [SRC[>>5]]
]EG]

[9] [[文書言語]]や[[実装]]によっては[[活性]]状態となる[[要素]]に制限があるかもしれません。 [SRC[>>5]]

[39] [[要素]]が[[活性化中]]かどうかは、次のように決定しなければ[['''なりません''']]
[SRC[>>38]]。
[FIG(steps)[
= [80] [[子孫]]が [CODE(CSS)@en[[[:active]]]] なら、[[活性化中]]です。ここで終わります。
= [81] [[被ラベル付け制御子]]が [CODE(CSS)@en[[[:active]]]] な [CODE(HTMLe)@en[[[label]]]]
[[要素]]なら、[[活性化中]]です。ここで終わります。
= [82] [CODE(HTMLe)@en[[[button]]]] [[要素]]か、
[CODE(HTML)@en[[[<input type=submit>]]]], [CODE(HTML)@en[[[<input type=image>]]]],
[CODE(HTML)@en[[[<input type=reset>]]]], [CODE(HTML)@en[[[<input type=button>]]]] なら、
== [83] [[形式的活性化状態]]でありかつ[[無効]]でないなら[[活性化中]]で、
それ以外なら[[活性化中]]ではありません。ここで終わります。
= [84] [CODE(HTMLe)@en[[[menuitem]]]] [[要素]]なら、
== [85] [[形式的活性化状態]]でありかつ [CODE(HTMLa)@en[[[disabled]]]] 
[[属性]]がないなら[[活性化中]]で、それ以外なら[[活性化中]]ではありません。ここで終わります。
= [86] [CODE(HTML)@en[<[[a]] [[href]]>]], [CODE(HTML)@en[<[[area]] [[href]]>]],
[CODE(HTML)@en[<[[link]] [[href]]>]] か、 [[tabindex focus flag]] が設定された[[要素]]なら、
== [87] [[形式的活性化状態]]なら[[活性化中]]で、それ以外なら[[活性化中]]ではありません。
ここで終わります。
= [88] [[活性的に指示されている]]なら、[[活性化中]]です。
= [89] それ以外なら、[[活性化中]]ではありません。
]FIG]

[EG[
[50] 例えば、[[鍵盤]]の[[スペース・バー]]を押下することによって[[ボタン]]を押す場合、
[CODE(DOMe)@en[[[keydown]]]] [[事象]]を受け取ってから [CODE(DOMe)@en[[[keyup]]]] [[事象]]を受け取るまでの間、
[CODE(CSS)@en[[[:active]]]] に[[一致]]します。

[51] 例えば、[[マウス]]の[[ボタン]]が押されてから離されるまでの間、 [CODE(CSS)@en[[[:active]]]]
に[[一致]]します。
]EG]

;; [41] [[活性化動作]]の実行が [CODE(CSS)@en[[[:active]]]] 状態にある時間に影響しますが、
[[活性化動作]]が定義されているかどうかとどの[[要素]]が [CODE(CSS)@en[[[:active]]]]
状態となるかは関係ありません。

* [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]] 版) <http://www.w3.org/Style/CSS/draft4.html#pseudo>
- [18] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#anchor-pseudo-classes>
]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]] 版) <http://www.w3.org/TR/1998/PR-CSS2-19980324/selector.html#dynamic-pseudo-classes>
- [15] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>
]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]] 版) <http://www.w3.org/TR/1999/WD-css3-userint-19990916#pseudo-active>
- [26] [CITE@en[User Interface for CSS3]] ([TIME[2000-06-23 03:09:21 +09:00]] 版) <http://www.w3.org/TR/2000/WD-css3-userint-20000216#pseudo-active>
- [29] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-04-11 01:57:05 +09:00]] 版) <http://www.w3.org/TR/2000/WD-css3-selectors-20000410#useraction-pseudos>
- [31] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-10-06 02:05:50 +09:00]] 版) <http://www.w3.org/TR/2000/WD-css3-selectors-20001005/#useraction-pseudos>
- [32] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2001-01-29 23:57:00 +09:00]] 版) <http://www.w3.org/TR/2001/WD-css3-selectors-20010126/#useraction-pseudos>
]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]] 版) <http://dev.w3.org/csswg/css3-ui/#active>
- [23] [CITE@en[CSS3 Basic User Interface Module]] ([[Tantek Çelik]] 著, [TIME[2004-05-12 02:17:47 +09:00]] 版) <http://www.w3.org/TR/2004/CR-css3-ui-20040511/#active>
- [54] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版) <http://www.w3.org/TR/2012/WD-css3-ui-20120117/#active>
]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]] 版))
<http://hixie.ch/specs/html/apps/web-apps-1#pseudo-classes>
- [27] [CITE@en-GB-hixie[Web Controls 1.0]]
( ([TIME[2004-11-09 08:49:52 +09:00]] 版))
<http://www.whatwg.org/specs/web-controls/current-work/#pseudo-classes>
]REFS]

** 選択子3

[REFS[
- [33] [CITE@en[Selectors Level 3]] ([TIME[2009-03-10 13:17:53 +09:00]] 版) <http://www.w3.org/TR/2009/WD-css3-selectors-20090310/#dynamic-pseudos>
- [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act>
]REFS]

[10] [CODE(CSS)@en[[[:active]]]] な[[要素]]の[[親要素]]もまた [CODE(CSS)@en[[[:active]]]]
な状態かどうか、[[選択子]]の仕様としては定義しないとされています。 [SRC[>>5]]

[11] しかし実際には多くの [[Webブラウザー]]で[[親要素]]もまた [CODE(CSS)@en[[[:active]]]]
となるため、[[著者]]もそれを前提にしているようです。これを踏まえて後に [[HTML]]
の仕様で正確な動作が規定されています (>>39)。

** HTML

[FIG(quote)[
[FIGCAPTION[
[2] [CITE[IRC logs: freenode / #whatwg / 20101228]]
( ([TIME[2011-01-07 01:10:29 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20101228#l-440>
]FIGCAPTION]

>
- [20:51] <TabAtkins> 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] <Hixie> TabAtkins: iirc it was based on a request of the csswg, but honestly i don't recall
- [21:38] <Hixie> well
- [22:08] <TabAtkins> Hixie: I suspect it was a request from fantasai, since she dislikes the idea of arbitrary elements being activatable.
- [22:09] <TabAtkins> Hixie: In any case, all browsers allow all elements to be :active.
- [22:09] <TabAtkins> I can file a bug if it would help.
- [22:12] <Hixie> TabAtkins: yeah, file a bug or send e-mail. IE didn't used to do this like the others.
- [22:13] <TabAtkins> Yeah, but they didn't use to do :hover on non-links either.
- [22:13] <TabAtkins> Will file.
- [22:13] <Hixie> so?
- [22:13] <Hixie> we're talking about :active, not :hover :-)
- [22:13] <Hixie> if we do change this we'll have to define what :active means
- [22:13] <TabAtkins> Right, but they're done through similar events, and conceivably are handled similarly in the browser.
- [22:13] <Hixie> and how to do it from the keyboard
- [22:14] <TabAtkins> You still can't activate arbitrary elements from the keyboard, unless they're tab-able or something.
- [22:15] <Hixie> that seems suboptimal
- [22:18] <TabAtkins> 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]] 版))
<http://html5.org/tools/web-apps-tracker?from=5880&to=5881>
- [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]] 版))
<http://html5.org/tools/web-apps-tracker?from=5896&to=5897>
- [38] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#pseudo-classes>
- [72] [CITE@en[Web Applications 1.0 r7602       Grand <menu> revamp. Note: This patch includes parser changes.]] ([TIME[2012-12-29 10:23:00 +09:00]] 版) <http://html5.org/tools/web-apps-tracker?from=7601&to=7602>
]REFS]

[52] [[選択子3]]の規定は曖昧さが多く残っていましたが、 [[HTML]] の仕様書はこれをより厳密に、
実際の [[Webブラウザー]]の挙動に近い形で規定しています。
はじめこれは[[意図的違反]]とされていましたが (>>3)、 [[CSS WG]] 方面から抗議があって[[意図的違反]]では無いような表現に改められています
(>>4)。

** 奇癖モード

[69] 2012年2月には、[[奇癖モード標準]]によって[[奇癖モード]]での規定がはじめて仕様化されました [SRC[>>57]]。

* 実装

[1] [CITE@ja[2009年5月 - Blog - EOF]] ([[Taku Watabe]] 著, [TIME[2009-05-16 00:11:32 +09:00]] 版) <http://end-of-file.net/blog/2009-05.html#date-2009-05-16>

>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]] 版))
<http://simon.html5.org/specs/quirks-mode#the-:active-and-:hover-quirk>

[70] [CITE[IRC logs: freenode / #whatwg / 20121109]]
( ([TIME[2012-11-26 22:30:44 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20121109#l-355>

[71] [CITE@ja[IE10でリンクをクリックした時に背景が青になるのですが、仕様で.. - 人力検索はてな]]
( ([TIME[2013-06-27 09:54:21 +09:00]] 版))
<http://q.hatena.ne.jp/1371726896#a1205853>

[74] [CITE@en[Web Applications 1.0 r2778 Defined how pseudo-classes match HTML concepts. Redid how rtl/ltr changes are marked. Stopped <legend> centering for <figure>. Removed <multicol> support. Removed <basefont> support. Removed obsolete notes. Fixed minor typos.]]
( ([TIME[2009-02-11 16:36:00 +09:00]] 版))
<http://html5.org/r/2778>

[75] [CITE@en-US[csswg: changeset 14820:2539f118cb22]]
( ([TIME[2014-11-27 22:51:42 +09:00]] 版))
<https://dvcs.w3.org/hg/csswg/rev/2539f118cb221178eeeb0e27c377e78b2feeb650>

[76] [CITE@en[Web Applications 1.0 r8867  active links should be color:red]]
( ([TIME[2014-11-27 09:35:00 +09:00]] 版))
<https://html5.org/r/8867>

[77] [CITE@en-US[csswg: changeset 14966:d176479b88ff]]
( ([TIME[2014-12-25 13:50:58 +09:00]] 版))
<https://dvcs.w3.org/hg/csswg/rev/d176479b88ffe2dcfa027be6aee807afc0d45bd2>

[78] [CITE@en[Web Applications 1.0 r8873  Match reality better for :active, even though this is suboptimal UI-wise.]] ([TIME[2015-01-07 08:33:00 +09:00]] 版) <https://html5.org/r/8873>

[42] [CITE@en[Web Applications 1.0 r8875  Fix the definition of :active to not be self-contradictory and to slightly better match reality for buttons. I'll submit a second patch that makes this readable in a second.]] ([TIME[2015-01-07 09:52:00 +09:00]] 版) <https://html5.org/r/8875>

[40] [CITE@en[Web Applications 1.0 r8877 Reword the :active logic to be at least somewhat readable.]] ([TIME[2015-01-07 10:26:00 +09:00]] 版) <https://html5.org/r/8877>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)