Edit

Page

Page title:

Page body:

[2] [DFN[[RUBYB[[[擬似クラス]]]@en[pseudo-class]]]]は、[[文書木]]の外部にある情報、
あるいは他の[[単純選択子]]だけでは表せない情報を使って[[要素]]を選択することができる[[単純選択子]]です
[SRC[>>3]]。

* 仕様書

[REFS[
- [3] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#pseudo-classes>
- [22] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>
]REFS]

* 意味

[15] [[擬似クラス]]は種類によっては互いに排他的な意味を持っている者同士のこともあります [SRC[>>3]] が、
それを指定すること自体は禁止されていません (意味はありませんが)。

[16] [[擬似クラス]]には[[利用者]]の動作などによって動的に一致したりしなくなったりするものもあります。

* 構文

[17] [[擬似クラス]]は[[単純選択子]]であり、[[単純選択子列]]内で何個でも使うことができます。
[[単純選択子]]は[[型選択子]]や[[普遍選択子]]よりも後に来なければなりません。
[[擬似要素]]は[[単純選択子列]]に含まれないので、[[擬似クラス]]は常に[[擬似要素]]の前に来る必要があります。

[13] [[擬似クラス]]は、 [CODE(CSS)[[[:]]]] ではじまり、[[擬似クラス]]の名前が続きます。
[[擬似クラス]]によっては更に[[括弧]]に括られた値が続くことがあります。 [SRC[>>3]]

[5]
[CODE(CSS)@en[[[:]]]] と[[擬似クラス]]名の間には[[注釈]]を挿入できます。

[REFS[
- [36] <http://suika.fam.cx/gate/2007/cssom/viewer?c=%3A%2F**%2Flang(en)%20%7B%7D%0A;h=;p=n;x=style-element>
]REFS]

;; [37] >>26 [[Firefox]] 2 も [[WinIE 6]] も仕様通りです。

[38] [[擬似クラス]]の名前と[[引数]]の [CODE(CSS)[[[(]]]] の間には[[注釈]]を挿入できません。

[REFS[
- [39] <http://suika.fam.cx/gate/2007/cssom/viewer?c=%3Alang%2F**%2F(ja)%20%7B%20color%3A%20red%20%7D;h=%3Cp%20lang%3Dja%3EThis%20paragraph%20must%20not%20be%20red.;p=n;x=style-element;i=html-div>
]REFS]

;; [40] [[Firefox]], [[Chrome]], [[WinIE8]] のいずれでもそうです。 [TIME[2011-10-30T09:11:03.000Z]]

* 大文字と小文字

[14] [[擬似クラス]]の名前は[[ASCII大文字・小文字不区別]]です
[SRC[>>3]]。括弧の中身については[[擬似クラス]]の種類に拠ります。

* レンダリング

[21] [[利用者エージェント]]は適用される[[擬似クラス]]が変化した時に[RUBYB[[[再流し込み]]]@en[reflow]]を行わなくても[['''構いません''']]
[SRC[>>22]]。

[EG[
[23] 例えば [CODE(CSS)@en[[[:active]]]] で通常と異なる [CODE(CSS)@en['[[font-size]]']] が指定されていると、
[[利用者]]がその[[要素]]を[[活性化]]することによってその[[要素]]の文字の位置が変化するかもしれません。
しかし[[利用者エージェント]]はこのスタイル規則を無視して構いません。 [SRC[>>22]]

;; [24] この無視がどのレベルで行われるのかはよくわかりません。[[利用値]]と[[実際値]]が異なるという感じでいいのでしょうか・・・。
]EG]

* 歴史

** CSS1

[REFS[
- [32] [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>
- [35] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951209.html#typo>
- [25] [CITE[Cascading Style Sheets, level 1]] 
-- [26] <http://www.w3.org/TR/CSS1/#terminology>
-- [27] '''<http://www.w3.org/TR/CSS1/#pseudo-classes-and-pseudo-elements>'''
]REFS]

[33] [[擬似クラス]]は >>32 で導入されました。当時は[[クラス選択子]]と同じ [CODE(CSS)[[[.]]]]
を使っていて、名前以外では本当に[[クラス]]と区別できませんでした。

[34] >>35 で [CODE(CSS)[[[.]]]] のかわりに [CODE(CSS)[[[:]]]] が使われるようになりました。
この時は今の[[擬似要素]]も[[擬似クラス]]と呼ばれるようになり [WEAK[([[擬似要素]]の歴史の項を参照。)]]、
やはり [CODE(CSS)[[[:]]]] が使われるようになりました。

** CSS2

[REFS[
- [18] [CITE@en[Selectors]]
-- [19] <http://www.w3.org/TR/CSS2/selector.html#pseudo-classes>
-- [20] '''<http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors>'''
]REFS]

** XForms

[REFS[
- [12] [CITE@EN[XForms 1.1]] ([TIME[2010-08-13 07:45:33 +09:00]] 版) <http://www.w3.org/TR/xforms/#N90079>
- [28] [CITE@EN[XForms 1.0 (Third Edition)]] ([TIME[2007-10-30 03:02:40 +09:00]] 版) <http://www.w3.org/TR/2007/REC-xforms-20071029/#N13F8E>
]REFS]

[29] [[XForms]] ではいくつかの[[擬似クラス]]の [[XForms]] での意味が[[参考]]として掲載されています。

[30] [[XForms 1.0]] は[[選択子3]]または[[CSS UI]]で規定されている[[擬似クラス]]について述べています。

[31] [[XForms 1.1]] ではそれに加えて [CODE(CSS)@en[[[:value-empty]]]] と [CODE(CSS)@en[[[:value-non-empty]]]]
について述べています。

* 関連

[4]
[[擬似要素]]は構文的に似ていますが (以前は同じでした)、意味的に違いがあります。

* 擬似クラスの一覧

[1]  
,名前	,説明	,状態	,出典
,[CODE(CSS)@en[[[:above-level]]]]
,[CODE(CSS)@en[:[[active]]]]	,[[活性]]	,[[W3C]] [[勧告]]	,"[CSS1], [CSS2], [CSS2.1], [Selectors], [CSS3 UI]"
,[CODE(CSS)@en[:[[alink]]]]	,[[活性]][[リンク]]	,非標準 → [CODE(CSS)@en[:[[active]]]]
,[CODE(CSS)@en[:[[-moz-alt-text]]]]
,[CODE(CSS)[:[[-moz-any-link]]]]
,[CODE(CSS)@en[:[[-webkit-any-link]]]]
,[CODE(CSS)@en[[[:at-level]]]]
,[CODE(CSS)@en[:[[-webkit-autofill]]]]
,[CODE(CSS)@en[[[:below-level]]]]
,[CODE(CSS)@en[:[[blank]]]]	,	,非標準
,[CODE(CSS)@en[[[:bound-element]]]]
,[CODE(CSS)@en[[[:-moz-bound-element]]]]
,[CODE(CSS)@en[:[[-moz-broken]]]]
,[CODE(CSS)[:[[checked]]]]	,[[チェック済]]	,[[W3C]] [[勧告候補]]	,[Selectors]
,[CODE(CSS)@en[[[:closed]]]]
,[CODE(CSS)@en[:[[contains]]([VAR[文字列]])]]	,	,削除 ([[W3C]] [[勧告候補]])	,[DEL@en[Selectors]]
,[CODE(CSS)@en[:[[current]]]]	,選択項目	,非標準
,[CODE(CSS)@en[:[[default]]]]	,	,[[W3C]] [[勧告候補]]	,[CSS3 UI]
,[CODE(CSS)[:[[disabled]]]]	,[[無効]]	,[[W3C]] [[勧告候補]]	,"[Selectors], [XForms]"
,[CODE(CSS)@en[:[[-webkit-drag]]]]
,[CODE(CSS)[:[[-moz-drag-over]]]]
,[CODE(CSS)@en[:[[edited]]]]	,	,[DEL@en[[[W3C]] [[LCWD]]]]	,[[SVG 1.2]]
,[CODE(CSS)[:[[empty]]]]	,[[空要素]]	,[[W3C]] [[勧告候補]]	,[Selectors]
,[CODE(CSS)@en[:[[-moz-empty-except-children-with-localname]]]]
,[CODE(CSS)[:[[enabled]]]]	,[[有効]]	,[[W3C]] [[勧告候補]]	,"[Selectors], [XForms]"
,[CODE(CSS)@en[:[[eq]]]]	,特定数番目	,非標準	,[[jQuery]]
,[CODE(CSS)@en[:[[even]]]]	,[[偶数]]番目	,非標準	,[[jQuery]]
,[CODE(CSS)@en[:[[expanded]]]]	,展開中	,非標準
,[CODE(CSS)[:[[first]]]]	,最初の[[頁]]	,[[W3C]] [[勧告]]	,[[CSS 2]]
,[CODE(CSS)@en[:[[first]]]]	,一番目	,非標準	,[[jQuery]]
- [CODE(CSS)@en[[[:first-child]]]]
- [CODE(CSS)@en[[[:-moz-first-node]]]]
- [CODE(CSS)@en[[[:first-of-any]]]]
- [CODE(CSS)@en[[[:first-of-type]]]]
- [CODE(CSS)@en[[[:focus]]]]
- [CODE(CSS)@en[[[:forms-invalid]]]]
- [CODE(CSS)@en[[[:forms-optional]]]]
- [CODE(CSS)@en[[[:forms-required]]]]
- [CODE(CSS)@en[[[:forms-valid]]]]
- [CODE(CSS)@en[[[:future]]]]
,[CODE(CSS)@en[:[[gt]]]]	,特定数番目より後	,非標準	,[[jQuery]]
,[CODE(CSS)@en[:[[-moz-has-handlerref]]]]
,[CODE(CSS)@en[:[[hidden]]]]	,不可視	,非標準	,[[jQuery]]
,[CODE(CSS)[:[[hover]]]]	,[[mouseover]]	,[[W3C]] [[勧告]]	,"[[CSS 2]], [[CSS 2.1]], [Selectors]"
,[CODE(CSS)@en[:[[indeterminate]]]]	,	,[[W3C]] [[LCWD]] 予約 (元 [[W3C]] [[勧告候補]])	,[Selectors]
,[CODE(CSS)@en[:[[in-range]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)@en[[[:-webkit-input-placeholder]]]]
,[CODE(CSS)@en[:[[invalid]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)[:[[lang]]([VAR[言語]])]]	,[[自然言語]]	,[[W3C]] [[勧告]]	,"[[CSS 2]], [[CSS 2.1]], [Selectors]"
,[CODE(CSS)@en[:[[last]]]]	,最後	,非標準	,[[jQuery]]
- [CODE(CSS)@en[[[:last-child]]]]
- [CODE(CSS)@en[[[:-moz-last-node]]]]
- [CODE(CSS)@en[[[:last-of-any]]]]
- [CODE(CSS)@en[[[:last-of-type]]]]
,[CODE(CSS)[:[[left]]]]	,左の[[頁]]	,[[W3C]] [[勧告]]	,[[CSS 2]]
,[CODE(CSS)[:[[link]]]]	,未訪[[リンク]]	,[[W3C]] [[勧告]]	,"[[CSS 1]], [[CSS 2]], [[CSS 2.1]], [Selectors]"
,[CODE(CSS)@en[:[[-moz-loading]]]]
,[CODE(CSS)@en[:[[lt]]]]	,特定数番目より前	,非標準	,[[jQuery]]
,[CODE(CSS)[:[[-moz-math-font-style-anonymous]]]]
,[CODE(CSS)[:[[-moz-math-font-style-stretchy]]]]
,[CODE(CSS)@en[:[[-webkit-full-page-media]]]],,,[[WebKit]]
,[CODE(CSS)[:[[not]]([VAR[[[単純選択子]]]])]]	,[[否定]]	,[[W3C]] [[勧告候補]]	,[Selectors]
- [CODE(CSS)@en[[[:not-first-child]]]]
- [CODE(CSS)@en[[[:not-first-of-any]]]]
- [CODE(CSS)@en[[[:not-first-of-type]]]]
- [CODE(CSS)@en[[[:not-last-child]]]]
- [CODE(CSS)@en[[[:not-last-of-any]]]]
- [CODE(CSS)@en[[[:not-last-of-type]]]]
- [CODE(CSS)@en[[[:not-nth-of-type]]]]
- [CODE(CSS)@en[[[:not-nth-child]]]]
- [CODE(CSS)@en[[[:not-only-child]]]]
- [CODE(CSS)@en[[[:not-only-of-any]]]]
- [CODE(CSS)@en[[[:not-only-of-type]]]]
,[CODE(CSS)@en[:[[nth]]]]	,特定数番目	,非標準	,[[jQuery]]
- [CODE(CSS)@en[[[:nth-child]]]]
,[CODE(CSS)@en[:[[nth-last-child]]([VAR[n]])]]	,	,[[W3C]] [[勧告候補]]	,[Selectors]
,[CODE(CSS)@en[:[[nth-last-of-type]]([VAR[n]])]]	,	,[[W3C]] [[勧告候補]]	,[Selectors]
- [CODE(CSS)@en[[[:nth-of-type]]]]
- [CODE(CSS)@en[[[:odd]]]]
- [CODE(CSS)@en[[[:only-child]]]]
- [CODE(CSS)@en[[[:only-of-any]]]]
- [CODE(CSS)@en[[[:only-of-type]]]]
- [CODE(CSS)@en[[[:-moz-only-whitespace]]]]
- [CODE(CSS)@en[[[:open]]]]
,[CODE(CSS)@en[:[[optional]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)[:[[-moz-outline]]]]
,[CODE(CSS)@en[:[[out-of-range]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
- [CODE(CSS)@en[[[:parent]]]]
- [CODE(CSS)@en[[[:past]]]]
,[CODE(CSS)@en[:[[-o-prefocus]]]]	,	,	,[[Opera]] 9.50 Alpha 1
,[CODE(CSS)@en[:[[-moz-placeholder]]]]
,[CODE(CSS)@en[:[[read-only]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)@en[:[[-moz-read-only]]]]
,[CODE(CSS)@en[:[[read-write]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)@en[:[[-moz-read-write]]]]
,[CODE(CSS)@en[:[[required]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
,[CODE(CSS)[:[[right]]]]	,右の[[頁]]	,[[W3C]] [[勧告]]	,[[CSS 2]]
,[CODE(CSS)@en[[[:role]]]]
,[CODE(CSS)[:[[root]]]]	,[[根要素]]	,[[W3C]] [[勧告候補]]	,[Selectors]
- [CODE(CSS)@en[[[:selected]]]]
- [CODE(CSS)@en[[[:state]]]]
,[CODE(CSS)@en[:[[subject]]]]	,[[主語]]	,[DEL[([[W3C]] [[WD]])]]	,[[選択子]]
,[CODE(CSS)@en[:[[-moz-suppressed]]]]	,[[画像]]が[[ブロック]]されている場合
,[CODE(CSS)@en[:[[-moz-system-metric]]()]]
,[CODE(CSS)[:[[target]]]]	,	,[[W3C]] [[勧告候補]]	,[Selectors]
,[CODE(CSS)@en[:[[timed-inactive]]]]	,	,"[[W3C]] [[会員提出]], [[W3C]] [[WD]]"	,"[[時刻シート]], [[SMIL 3.0]]"
- [CODE(CSS)@en[[[:unchecked]]]]
- [CODE(CSS)@en[[[:unselected]]]]
,[CODE(CSS)@en[:[[-moz-type-unsupported]]]]	,未対応の [CODE(HTMLe)@en[[[object]]]] [CODE(HTMLa)@en[[[type]]]]
,[CODE(CSS)@en[:[[-moz-user-disabled]]]]	,[[利用者]]がすべての[[画像]]を無効化している場合
,[CODE(CSS)@en[:[[valid]]]]	,	,[[W3C]] [[勧告候補]]	,"[CSS3 UI], [XForms]"
- [CODE(CSS)@en[[[:value-empty]]]]
- [CODE(CSS)@en[[[:value-non-empty]]]]
- [CODE(CSS)@en[[[:visible]]]]
- [CODE(CSS)@en[[[:visited]]]]
- [CODE(CSS)@en[[[:vlink]]]]
- [CODE(CSS)@en[[[:write-only]]]]

[42] 
[CITE[Terra Informatica Software, Inc.]], [TIME[2024-08-17T08:40:26.000Z]], [TIME[2010-11-24T10:52:46.793Z]] <https://web.archive.org/web/20101124105140/http://www.terrainformatica.com/htmlayout/csss!-dom-object.whtm>

* メモ

[6]
[CITE[Bug 3935 &#8211; mozilla-native pseudo classes and properties should be marked as such '''['''SELECT''']''']] ([CODE[2007-12-23 13:33:53 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=3935>
([[名無しさん]])

[7]
[CITE@en[AlternateIdea: Introducing CSS event:Selectors]] ([TIME[2008-01-29 09:40:58 +09:00]] 版) <http://alternateidea.com/event-selectors/>

[8]
[CITE@en[CSS Reference:Mozilla Extensions - MDC]] ([TIME[2008-05-08 22:11:18 +09:00]] 版) <http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions>

[9] [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>

[10] [CITE@EN[XForms 1.1]]
([TIME[2009-10-20 22:51:54 +09:00]] 版)
<http://www.w3.org/TR/2009/REC-xforms-20091020/#N90079>

[11] [CITE@en-US[Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors]]
( ([TIME[2010-03-03 23:52:42 +09:00]] 版))
<http://download.oracle.com/docs/cd/E14571_01/apirefs.1111/e15862/toc.htm>

[41] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#matching>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)