擬似クラス

Edit New

擬似クラス (選択子)

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

仕様書

意味

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

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

構文

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

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

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

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

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

[40] Firefox, Chrome, WinIE8 のいずれでもそうです。

大文字と小文字

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

レンダリング

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

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

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

歴史

CSS1

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

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

CSS2

XForms

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

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

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

関連

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

擬似クラスの一覧

[1]

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

    • [42] Terra Informatica Software, Inc., , https://web.archive.org/web/20101124105140/http://www.terrainformatica.com/htmlayout/csss!-dom-object.whtm

    メモ

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

    [7] AlternateIdea: Introducing CSS event:Selectors ( 版) http://alternateidea.com/event-selectors/

    [8] CSS Reference:Mozilla Extensions - MDC ( 版) http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions

    [9] Web Controls 1.0 ( 版) http://www.whatwg.org/specs/web-controls/current-work/#pseudo-classes

    [10] XForms 1.1 ( 版) http://www.w3.org/TR/2009/REC-xforms-20091020/#N90079

    [11] Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors ( ( 版)) http://download.oracle.com/docs/cd/E14571_01/apirefs.1111/e15862/toc.htm

    [41] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#matching

    Updated: