[PR]ÃÚËޔԑg•\
¡–é‚̔ԑgÁª¯¸

ようこそ。

仕様書の規範的なバージョンはW3Cのサイトにある英語版である。翻訳された文書は翻訳からの誤りが含まれているかもしれない。

このバージョン:
http://isweb34.infoseek.co.jp/computer/zinganx/standards/2001/WD-css3-selectors-20011113.html
最新のバージョン:
http://www.jtw.zaq.ne.jp/zing/spec/css3-selectors.html
前のバージョン:
なし
翻訳者:
鉄野正夫・平野貴仁

W3C

セレクタ

2001年11月13日のW3Cの勧告候補

このバージョン:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113
最新のバージョン:
http://www.w3.org/TR/css3-selectors
前のバージョン:
http://www.w3.org/TR/2001/WD-css3-selectors-20010126
編集者:
Daniel Glazman (Netscape/AOL)
Tantek Çelik (Microsoft Corporation)
Ian Hickson
Peter Linss (former editor, formerly of Netscape/AOL)
John Williams (former editor, Quark, Inc.)

摘要

CSS(カスケードを行うスタイルシート)は、HTMLおよびXMLの文書の、画面上、紙面上、音声などでの描写法を記述するための言語である。スタイルのプロパティを文書中のエレメントに結びつけるため、CSSは、ひとつ以上のエレメントにマッチするパターンであるセレクタを用いる。CSSの水準3に推薦されるセレクタについて、この文書は説明する。このセレクタはCSSの水準2のセレクタを含み、拡張する。

この文書の地位

この文書は来るCSS3の仕様書の"モジュール"のひとつである。CSS1およびCSS2においてすでに存在するセレクタについて説明するだけでなく、CSS3と、このセレクタを必要とするほかの言語の、両方に対する新しいセレクタを提案することも行う。CSSの策定団体は、CSS3のすべての実装がすべてのセレクタを実装しなければならないだろうということを予期していない。その代わりとして、いわゆる"プロフィール"である、CSS3のいくつかの変形がおそらくできるだろう。たとえば、対話的なユーザエージェントのためのひとつのプロフィールだけが、提案されているセレクタのすべてを含む。

この仕様書は、CSSの策定団体によって勧告候補として提案されている。この文書は2001年1月26日付け策定中の草案の改訂版であり、ラストコールの再吟味、批評および、W3CのCSSの策定団体の更なる議論の間に受け取られた提案を組み入れている。

勧告候補の期間は、おおよそ六ヶ月続く(2002年5月終了)と予期されている。すべての人が、この仕様書を再吟味および実装し、(記録された)公開のメーリングリストwww-style(使用説明書を見よ)に批評を返すように奨励される。また、W3Cの会員はCSSの策定団体まで直接に批評を送ることもできる。

万一この仕様書が実施不可能だとわかれば、策定団体は、この文書を策定中の草案の地位に戻し、必要な変更を行う。さもなければ、策定団体は、この文書を勧告案に進めることをW3Cの理事に求めることを予期する。

これはまだ草案の文書であり、いつでも、ほかの文書によって、更新されたり、取って代わられたり、時代遅れにされたりするかもしれない。W3Cの勧告候補を"策定進行中"ではないものとして引用することは不適切である。現在の策定中の草案の一覧表は、http://www.w3.org/TRで見つけられる。

この文書は、翻訳が利用できるかもしれない。この仕様書の英語のバージョンが、唯一の規範的なバージョンである。

ほかのCSS3モジュールへの依存

目次

1. 状況

CSS+FPの策定団体の会員は、CSSの仕様書をモジュール化することを、Clamart会議の間に提案した。

このモジュール化、およびCSSの一般的シンタックスの外面化は、仕様書のサイズを減らし、セレクタおよび/あるいはCSSの一般的なシンタックスを新しい仕様書が用いることを可能にする。たとえば、振る舞いやツリーの変換がある。

この文書において導入される構想ごとのテストである、試験事例をこの仕様書は含む。そのテストは完全な適合試験ではないが、この仕様書のある部分が、最小限の程度実装されているか、あるいはまったく実装されていないか確認する方法を使用者に提供するつもりである。

1.1 CSS2からの変更

CSS2におけるセレクタと、セレクタにおけるものとの間の主要な違いは、

である。

2. セレクタ

セレクタは構造を表現する。セレクタが文書のツリーの中でどのエレメントにマッチするのか決定する(たとえば、CSSの規則における)条件として、あるいは、その構造と一致するHTMLまたはXMLの断片の均一な記述として、この構造は使われる。

セレクタは単純な要素から、高機能な前後の関係上の表現まで及びうる。

次に続く表は、セレクタのシンタックスを手短に述べるものである。

型 意味 説明される項 最初に定義されたCSSの水準
* すべての要素 普遍的なセレクタ 2
E 種類Eのエレメント 種類のセレクタ 1
E[foo] "foo"というアトリビュートのEというエレメント アトリビュートのセレクタ 2
E[foo="bar"] "foo"というアトリビュートの値が厳密に"bar"と等しいEというエレメント アトリビュートのセレクタ 2
E[foo~="bar"] "foo"というアトリビュートの値がスペースで区切られた値のリストであり、そのひとつが厳密に"bar"と等しいEというエレメント アトリビュートのセレクタ 2
E[foo^="bar"] "foo"というアトリビュートの値が厳密に文字列"bar"から始まるEというエレメント アトリビュートのセレクタ 3
E[foo$="bar"] "foo"というアトリビュートの値が厳密に文字列"bar"で終わるEというエレメント アトリビュートのセレクタ 3
E[foo*="bar"] "foo"というアトリビュートの値が部分文字列"bar"を含むEというエレメント アトリビュートのセレクタ 3
E[hreflang|="en"] "hreflang"というアトリビュートが、"en"で(左から)始まる値のハイフンで区切られたリストであるEというエレメント アトリビュートのセレクタ 2
E:root 文書のルートである、Eというエレメント 構造上の擬似クラス 3
E:nth-child(n) その親のn番目の子であるEというエレメント 構造上の擬似クラス 3
E:nth-last-child(n) 最後のから数えてその親のn番目の子であるEという要素 構造上の擬似クラス 3
E:nth-of-type(n) その種類のn番目の兄弟であるEというエレメント 構造上の擬似クラス 3
E:nth-last-of-type(n) 最後のから数えて、その種類のn番目の兄弟であるEというエレメント 構造上の擬似クラス 3
E:first-child その親の最初の子であるEというエレメント 構造上の擬似クラス 2
E:last-child その親の最後の子であるEというエレメント 構造上の擬似クラス 3
E:first-of-type その種類の最初の兄弟であるEというエレメント 構造上の擬似クラス 3
E:last-of-type その種類の最後の兄弟であるEというエレメント 構造上の擬似クラス 3
E:only-child その親の唯一の子であるEというエレメント 構造上の擬似クラス 3
E:only-of-type その種類の唯一の兄弟であるEというエレメント 構造上の擬似クラス 3
E:empty (テキストのノードを含めて)子供を持たないEというエレメント 構造上の擬似クラス 3
E:link
E:visited
ターゲットがまだ訪れていない(:link)か、あるいはすでに訪れている(:visited)ハイパーリンク元のアンカーであるEというエレメント リンクの擬似クラス 1
E:active
E:hover
E:focus
使用者がある行為をしている間のEというエレメント 使用者の行為の擬似クラス 1および2
E:target 参照しているURIのターゲットであるEというエレメント ターゲットの擬似クラス 3
E:lang(fr) 言語"fr"における種類Eのエレメント(その文書言語は、言語が決定される方法を明示する) :lang()という擬似クラス  2
E:enabled
E:disabled 
有効または無効にされているユーザインタフェースエレメントE UIのエレメントの状態の擬似クラス 3
E:checked
E:indeterminate 
チェックされているか、またはチェックされていない状態のユーザインタフェースエレメントE(たとえばラジオボタンやチェックボックス) UIのエレメントの状態の擬似クラス 3
E:contains("foo") テキストの内容に部分文字列"foo"を含むEというエレメント 内容の擬似クラス 3
E::first-line Eというエレメントの最初にフォーマットされる行 :first-lineという擬似エレメント 1
E::first-letter Eというエレメントの最初にフォーマットされる文字 :first-letterという擬似要素 1
E::selection 使用者によって現在選択/強調されている、Eというエレメントの一部 UIのエレメントの断片の擬似エレメント 3
E::before Eというエレメントの前に生成される内容 :beforeという擬似エレメント 2
E::after Eというエレメントの後に生成される内容 :afterという擬似エレメント 2
E.warning クラスが"warning"であるEという要素(その文書言語はクラスが決定される方法を明示する)。 クラスのセレクタ 1
E#myid IDが"myid"と等しいEというエレメント。 IDのセレクタ 1
E:not(s) 単純なセレクタsにマッチしないEというエレメント 打消しの擬似クラス 3
E F Eというエレメントの子孫であるFというエレメント 子孫の結合子 1
E > F Eというエレメントの子であるFというエレメント 子の結合子 2
E + F Eというエレメントの直後に来るFというエレメント 直接隣接の結合子 2
E ~ F Eというエレメントの後に来るFというエレメント 間接隣接の結合子 3

それぞれのセレクタの意味は、"意味"の縦の列のそれぞれのセルの内容に対して前に位置する"マッチ"によって上の表から引き出される。

3. 大文字・小文字の区別

セレクタにおける、文書言語のエレメントの名前の大文字・小文字の区別は、文書言語に依存する。たとえば、HTMLの場合においては、エレメントの名前は大文字・小文字を区別しないが、XMLの場合においては大文字・小文字を区別する。

また、アトリビュートのセレクタにおける、アトリビュートの名前とアトリビュートの値の大文字・小文字の区別も、文書言語に依存する。

4. セレクタのシンタックス

セレクタは、結合子で区切られた、ひとつ以上の、単純なセレクタの連続である。

単純なセレクタの連続は、結合子で区切られていない一続きの単純なセレクタである。それは、常に種類のセレクタあるいは普遍的なセレクタから始まる。このほかには、種類のセレクタあるいは普遍的なセレクタは、連続の中で許容されない。

単純なセレクタは、種類のセレクタ、普遍的なセレクタ、アトリビュートのセレクタ、IDのセレクタ、内容のセレクタまたは擬似クラスのいずれかである。単純なセレクタの最後の連続にひとつの擬似エレメントが追加されてもよい。

結合子は、空白、"大なりの記号"(>)、"プラスの記号"(+)および"チルダ"(~)である。空白は、それを取り囲む結合子と単純なセレクタの間に現れてもよい。文字"スペース"(Unicodeのコード32)、"タブ"(9)、"ラインフィード"(10)、"キャリッジリターン"(13)および"フォームフィード"(12)がだけ空白に存在してよい。"半角のスペース"(8195)および"表意文字のスペース"(12288)のような、ほかのスペースのような文字は、空白の役割はない。

セレクタによって表される文書のツリーのエレメントは、セレクタの実体と呼ばれる。単純なセレクタのただひとつの連続からなるセレクタは、必要条件を満たすすべてのエレメントを表す。ある連続を、別の、単純なセレクタの連続と結合子に追加すると、付加的なマッチの制約が課されるので、セレクタの実体は、常に、単純なセレクタのもっとも右の連続によって表されるエレメントのサブセットになる。

注: 単純なセレクタの連続も結合子も含まない空のセレクタは、無効なセレクタである。

5. セレクタの群

いくつかのセレクタが同じ宣言を共有するとき、コンマで区切られたリストに集められてもよい。

CSSの例:

この例において、まったく同じ宣言を持つ三つの規則を導く。したがって、

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
は、
h1, h2, h3 { font-family: sans-serif }
と等しい。

警告: すべてのセレクタが有効なセレクタであるから、この例において同等であることは正しい。そのセレクタのひとつが無効であれば、セレクタの全体の群が無効になるから、すべての三つの項目のエレメントに対する規則が無効になるが、三つの個々の項目の規則ならば、ただひとつが無効になる。

6. 単純なセレクタ

6.1 種類のセレクタ

種類のセレクタは、文書言語のエレメントの種類の名前である。文書のツリーにおけるエレメントの種類の事例を種類のセレクタは表す。

例:

文書のツリーにおけるh1というエレメントを、以下に続くセレクタは表す。

h1

6.1.1 種類のセレクタとネームスペース

種類のセレクタは、任意のネームスペース([XML-NAMES])の構成要素を許容する。前もって宣言されているネームスペースのプレフィックスに、ネームスペースのセパレータである"縦線"(|)によって区切られたエレメントの名前が加えられる。宣言されたネームスペースを持たないエレメントをセレクタが表すことを意図しているのを示すのに、ネームスペースの構成要素は空にしておいてもよい。アスタリスクはネームスペースのプレフィックスに用いてもよく、(ネームスペースを持たないエレメントを含んで)すべてのネームスペースにおけるエレメントをそのセレクタが表すことを示す。デフォルトのネームスペースが宣言されていなければ、ネームスペースの構成要素(ネームスペースのセパレータ)を持たないエレメントの種類のセレクタは、エレメントのネームスペースにかかわらずエレメントを表す("*|"と等しい)。この事例においては、デフォルトのネームスペースにおけるエレメントをセレクタは表す。

注 : 前もって宣言されていないネームスペースのプレフィックスを含む種類のセレクタは無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装している言語にゆだねられる。CSSの場合においては、その方法は、一般的なシンタックスのモジュールの中で定義される。

もしセレクタにおいて用いられているネームスペースのプレフィックスが前もって宣言されてなければ、セレクタは無効だとみなされなければならず、標準のエラーの処理規則にしたがって全体のセレクタが無視されることに注意するべきだ。

ネームスペースの認識のあるクライアントにおいて、エレメントの修飾された名前のローカルの部分だけに対比して、エレメントの種類のセレクタがマッチすることに注意するべきだ。低水準のクライアントにおけるマッチの挙動についての注釈は、下を見よ。

概して:

ns|E
nsというネームスペースにおける名前がEのエレメント
*|E
すべてのネームスペースにおける、名前がEのエレメント。宣言されたネームスペースを持たないものも含む
|E
宣言されたネームスペースを持たない、名前がEの要素
E
もしデフォルトのネームスペースが明示されていなければ、これは*|Eと等しい。そうでなければ、nsがデフォルトのネームスペースであるns|Eと等しい。

CSSの例:

@namespace foo url(http://www.example.com);

foo|h1 { color: blue }

foo|* { color: yellow }

|h1 { color: red }

*|h1 { color: green }

h1 { color: green }

"http://www.example.com"というネームスペースにおけるh1というエレメントだけに最初の規則はマッチする。

"http://www.example.com"というネームスペースにおけるすべてのエレメントに二番目の規則はマッチする。

宣言されるネームスペースを持たないh1というエレメントだけに三番目の規則はマッチする。

(宣言されたネームスペースを持たないものも含めて)すべてのネームスペースにおけるh1というエレメントに四番目の規則はマッチする。

デフォルトのネームスペースが定義されていないから、最後の規則は四番目の規則と等しい。

6.2 普遍的なセレクタ

普遍的なセレクタである、書かれた"アスタリスク"(*)は、すべてのエレメントの種類に適合する名前を表す。もしデフォルトのネームスペースが明示されていなければ、(宣言されているネームスペースを持たないものも含めて、)すべてのネームスペースにおける、文書のツリーのすべての個々のエレメントを、これは表現する。もしデフォルトのネームスペースが明示されていれば、下の普遍的なセレクタとネームスペースを見よ。

もし普遍的なセレクタが単純なセレクタの連続の構成要素でしかなければ、*は省略されてもよい。たとえば、

注: 普遍的なセレクタを表す*は省かれないことが推奨される。

6.2.1 普遍的なセレクタとネームスペース

普遍的なセレクタは任意のネームスペースの構成要素を許容する。

ns|*
nsというネームスペースにおけるすべてのエレメント
*|*
すべてのエレメント
|*
宣言されたネームスペースを持たないすべてのエレメント
*
もしデフォルトのネームスペースが明示されていなければ、*|*と等しい。そうでなければ、nsデフォルトのネームスペースであるns|*と等しい。

注: 前もって宣言されていないネームスペースのプレフィックスを含む普遍的なセレクタは無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装する言語にゆだねられる。CSSの場合においては、その方法は一般的なシンタックスのモジュールの中で定義される。

6.3 アトリビュートのセレクタ

セレクタはエレメントのアトリビュートの表現を可能にする。

6.3.1 アトリビュートの存在と値のセレクタ

CSS2は四つのアトリビュートのセレクタを導入した。

[att]
どんなアトリビュートの値であっても、attというアトリビュートを表す。
[att=val]
値が厳密に"val"であるattというアトリビュートを表す。
[att~=val]
値がスペースで区切られた単語のリストであり、そのうちのひとつが厳密に"val"であるattというアトリビュートを表す。もしこのセレクタが用いられれば、(スペースによって区切られているから)値における単語はスペースを含んではならない。
[att|=val]
値が厳密に"val"であるか、"-"の直前に来る"val"で始まっているかのいずれかであるattというアトリビュートを表す。RFC3066([RFC3066])の中で説明されているように、言語のサブコードのマッチ(たとえば、HTMLの中でlinkというエレメントにおけるhreflangというアトリビュート)を主としてこれは可能にするつもりである。注:lang(あるいはxml:lang)の言語のサブコードのマッチのためには、:langという擬似クラスを見てください。

アトリビュートの値は、識別子か文字列でなければならない。セレクタにおけるアトリビュートの名前及び値の大文字・小文字の区別は文書言語に依存する。

例:

たとえば、titleというアトリビュートをもっていれば、どんな値であっても、h1というエレメントを、以下に続くアトリビュートのセレクタは表す。

h1[title]

以下に続く例においては、classというアトリビュートが厳密に値"example"をもつspanというエレメントを、セレクタは表す。

span[class=example]
エレメントのいくつかのアトリビュート、あるいは同じアトリビュートにおけるいくつかの条件に、複数のアトリビュートのセレクタが用いられる。

ここでは、helloというアトリビュートが厳密に値"Cleveland"を持ち、goodbyeというアトリビュートが厳密に値"Columbus"を持っているspanというエレメントを表す。

span[hello="Cleveland"][goodbye="Columbus"]

以下に続くセレクタは、"="および"~="の間の違いを例証する。最初のセレクタは、たとえばrelというアトリビュートの値"copyright copyleft copyeditor"を表す。hrefというアトリビュートが厳密な値"http://www.w3.org/"を持っているaというエレメントを二番目のセレクタは表す。

a[rel~="copyright"]
a[href="http://www.w3.org/"]

hreflangというアトリビュートが厳密に"fr"であるlinkというエレメントを以下に続くセレクタは表す。

link[hreflang=fr]

"en"、"en-US"および"en-cockney"を含めて、hreflangというアトリビュートの値が"en"から始まるlinkというエレメントを、以下に続くセレクタは表す。

link[hreflang|="en"]

同様に、アトリビュートcharacterに対する二つの異なる値のうちのひとつを持っているときはいつでも、DIALOGUEというエレメントを以下に続くセレクタは表す。

DIALOGUE[character=romeo] 

DIALOGUE[character=juliet]

6.3.2 アトリビュートのセレクタにマッチする部分文字列

アトリビュートの値における部分文字列にマッチするのに三つの付加的なアトリビュートのセレクタが提供される。

[att^=val]
値が接頭辞"val"から始まるattというアトリビュートを表す
[att$=val]
値が接尾辞"val"で終わるattというアトリビュートを表す
[att*=val]
部分文字列"val"の少なくともひとつの事例を含むattというアトリビュートを表す

アトリビュートの値は、識別子か文字列でなければならない。セレクタにおけるアトリビュートの名前及び値の大文字・小文字の区別は文書言語に依存する。

例:

画像を参照している、HTMLのobjectを、以下に続くセレクタは表す。

object[type^="image/"]

値が".html"で終わるhrefというアトリビュートを持っている、HTMLのアンカーであるaを、以下に続くセレクタを表す。

a[href$=".html"]

値が部分文字列"hello"を含むtitleというアトリビュートを持っている、HTMLの段落を、以下に続くセレクタは表す。

p[title*="hello"] 

6.3.3 アトリビュートのセレクタとネームスペース

アトリビュートの名前に対する任意のネームスペースの構成要素をアトリビュートのセレクタは許容する。ネームスペースのプレフィックスは、ネームスペースのセパレータ"縦線"(|)によって区切られるアトリビュートの名前を、前もって宣言されているネームスペースのプレフィックスに加えてもよい。XMLの勧告におけるネームスペースに相応して、デフォルトのネームスペースはアトリビュートを提供しないから、したがって、宣言されているネームスペースを持たないアトリビュートにだけ、ネームスペースの構成要素を持たないアトリビュートのセレクタは適用される("|attr"と等しい)。アトリビュートのネームスペースにかかわらず、すべてのアトリビュートの名前と、アスタリスクはマッチする。

注 : 前もって定義されていないネームスペースのプレフィックスをアトリビュートの名前が含んでいるアトリビュートのセレクタは、無効なセレクタである。ネームスペースのプレフィックスを宣言するための方法は、セレクタを実装する言語にゆだねられる。CSSの場合においては、その方法は一般的なシンタックスのモジュールの中で定義される。

CSSの例:

@namespace foo "http://www.example.com";

[foo|att=val] { color: blue }

[*|att] { color: yellow }

[|att] { color: green }

[att] { color: green }
値が"val"である"http://www.example.com"というネームスペースの中にアトリビュートattがあるエレメントにだけ最初の規則はマッチする。

(宣言されていないネームスペースも含めて)アトリビュートのネームスペースにかかわらずアトリビュートattを持つエレメントにだけマッチする。

最後の二つの規則は同等で、あるネームスペースの中にあることをアトリビュートが宣言されていないアトリビュートattを持つエレメントにだけマッチする。

6.3.4 DTDにおけるデフォルトのアトリビュート

文書のツリーにおけるアトリビュートの値をアトリビュートのセレクタは明示的に表す。DTDおよびそのほかの場所でデフォルトのアトリビュートの値は定義されている。たとえデフォルトの値が文書のツリーにおいて含まれていなくても、セレクタは、動くように設計されるべきだ。

例:

たとえば、notationというデフォルトの値を持っているアトリビュート"decimal"のあるエレメントEXAMPLEをよく考えよ。DTDの断片は、

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
となるかもしれない。アトリビュートの値が明示的に定められたとき、EXAMPLEというエレメントをセレクタが表現すれば、
EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]
デフォルトで、そして非明示的に定められる事例だけをこのアトリビュートが表現するために、以下に続くセレクタが使われるかもしれない。
EXAMPLE:not([notation])

6.4 クラスのセレクタ

HTMLで作業していると、classというアトリビュートを表すときに、~=の表記法の代わりとして、ピリオド(.)の表記法を著作者は用いてもよい。したがって、HTMLに対しては、div.valueおよびdiv[class~=value]は同じ意味を持っている。アトリビュートの値は"ピリオド"(.)の直後にこなければならない。注:それぞれのネームスペースのに対して、どのアトリビュートが"クラス"のアトリビュートであるか決定するのを可能にする、ネームスペースの明確な認識をUAが持っていれば、XMLの文書において、ピリオド(.)の表記法を用いるセレクタを適用してもよい。ひとつのその例として、個々のネームスペースに対する仕様書の中の本文によって、ネームスペースの明確な認識が与えられる。(たとえば、SVG 1.0[SVG]は、SVGの"クラス"のアトリビュートおよびUAが解釈すべき方法を説明し、同様に、MathML 1.01[MATH]は、MathMLの"クラス"のアトリビュートについて説明する。)

例:

たとえば、class~="pastoral"を持っている任意のエレメントを次のように表すことができる。

*.pastoral
あるいは、ただ、
.pastoral
以下に続くセレクタは、class~="pastoral"を持っているh1というエレメントを表す。
h1.pastoral

たとえば、"pastoral"および"marine"を含むスペースで区切られた値のリストが、classというアトリビュートに割り当てられている、pというエレメントを、以下に続くセレクタは表す。

p.pastoral.marine

これは、

p.marine.pastoral

と完全に等しい。

このセレクタは、たとえば、class="pastoral blue"ではなく、class="pastoral blue aqua marine"あるいはclass="marine blue pastoral aqua"を持っているpを表す。

6.5 IDのセレクタ

文書言語は、種類IDであると宣言されているアトリビュートを含むかもしれない。種類IDというアトリビュートが特別なのは、持っているエレメントの種類にかかわらず、そのようなアトリビュートが、二つとして文書の中で同じ値を持つことができないからである。どのような文書言語でも、IDに分類されたアトリビュートはエレメントをひとつに識別するために用いられる。HTMLにおいて、すべてのIDのアトリビュートは、"id"と名づけられる。XMLのアプリケーションは、IDのアトリビュートを違った風に名づけてもよいが、同じ制約が適用される。

文書言語の、IDに分類されるアトリビュートは、文書のツリーの中でひとつのエレメントの事例に、ある識別子を割り当てることを可能にする。その識別子に基づいたエレメントの事例を、W3CのIDのセレクタは表現する。a "番号の記号"(#)と直後に来るIDの値をIDのセレクタは含む。

例:

以下に続くIDのセレクタは、IDに分類されたアトリビュートが値"chapter1"を持っているh1というエレメントを表す。

h1#chapter1

以下に続くIDのセレクタは、IDに分類されたアトリビュートが値"chapter1"を持っているすべてのエレメントを表す。

#chapter1
以下に続くセレクタは、値"z98y"を持っているすべてのエレメントを表す。
*#z98y
注意せよ。XML 1.0[XML10]において、どのアトリビュートがエレメントのIDを含むかについての情報は、DTDまたはスキーマの中に含まれる。XMLを解釈するとき、UAは常にDTDを読むわけではないから、したがってエレメントのIDが何であるか知らなくてもよい(そのネームスペースに対してどのアトリビュートがIDのアトリビュートであるか決定するのを可能にする、ネームスペースの明確な認識をUAが持ってもよいが)。もしエレメントのIDが何であるかUAが知らないかもしれないと、スタイルシートの設計者がわかっているか、疑っているならば、#p371の代わりに、[name=p371]といったように、代わりに普通のアトリビュートのセレクタを使うべきだ。DTDのないXML 1.0の文書におけるエレメントは、まったくIDを持っていない。

6.6 擬似クラス

文書のツリーの中にないか、あるいは、ほかの単純なセレクタを用いては表現できない情報に基づいた選択を可能にするために、擬似クラスの構想が導入される。

"コロン"(:)と、その直後に来る擬似クラスの名前、および任意の丸括弧の間の値を、擬似クラスは常に含む。

セレクタに含まれる単純なセレクタのすべての連続の中で擬似クラスは許容される。先行する、種類のセレクタ、または普遍的なセレクタ(省略されるかもしれない)の後の、単純なセレクタの連続のどこにでも擬似クラスは許容される。擬似クラスの名前は大文字・小文字の区別がある。擬似クラスの中には相互に排他的なものもあれば、同じエレメントに同時に適用できるものもある。擬似クラスは動的であってもよい。つまり、使用者が文書とやりとりするときに、エレメントが擬似クラスを取得したり失ったりしてもよい。

6.6.1 動的な擬似クラス

原則として文書のツリーから導き出せない特質である、名前、アトリビュートまたは内容とは別の特質に関するエレメントを、動的な擬似クラスは分類する。

動的な擬似クラスは、文書のソースまたは文書のツリーの中には現れない。

リンクの擬似クラス: :linkおよび:visited

通例、以前に訪れたリンクと違った風に、ユーザエージェントは未訪問のリンクを表示する。これを識別するために、擬似クラス:linkおよび:visitedをセレクタは提供する。

注意せよ。いくらか時間が経過すれば、訪問したリンクを(未訪問の)'link'の状態に戻すことをユーザエージェントは選んでもよい。

二つの状態は互いに排他的である。

例:

クラスexternalを持っていて、すでに訪問したことのあるリンクを、以下に続くセレクタは表す。

a.external:visited
使用者の行為の擬似クラス:hover、:active、および:focus

対話的なユーザエージェントは、時々使用者の行為に応じて描写を変える。使用者が行為を行うエレメントの選択のために、セレクタは三つの擬似クラスを提供する。

どのエレメントが:activeになり、あるいは:focusを得ることができるのかに関して、文書言語または実装特定の制限があってもよい。

これらの擬似クラスは互いに排他的ではない。エレメントは同時にそのうちの数個にマッチするかもしれない。

例:
a:link    /* 未訪問のリンク     */
a:visited /* 訪問したリンク     */
a:hover   /* 使用者のホバー     */
a:active  /* アクティブなリンク */

動的な擬似クラスの例:

a:focus
a:focus:hover

擬似クラス:focusおよび擬似クラス:hoverの場合におけるaというエレメントに最後のセレクタはマッチする。

注意せよ。エレメントは':visited'と':active'(あるいは、':link'と':active')の両方になることもある。

6.6.2 ターゲットの擬似クラス:target

URIの中には、リソースの中の場所を参照するものがある。"番号の記号"(#)と、その次に続くアンカーの識別子で、この種類のURIは終わる。

ターゲットエレメントとして知られている、文書の中のあるエレメントへ、部分の識別子を持っているURIはリンクする。たとえば、HTMLの文書の中でsection_2と名づけられたアンカーをさしているURIがここにある。

http://example.com/html/top.html#section_2

:targetという擬似クラスによってターゲットエレメントは表される。

p.note:target

は、参照しているURIのターゲットエレメントである、クラスnoteのpを表す。

:targetという擬似クラスを使用するCSSの例:
*:target { color : red }

*:target::before { content : url(target.png) }

6.6.3 言語の擬似クラス:lang

もしエレメントの人間の言語が決定される方法を文書の言語が明示していれば、その言語に基礎付けられたエレメントを表すセレクタを書くことが可能である。たとえば、HTML[HTML4.01]の場合においては、langというアトリビュート、metaというエレメントの組み合わせと、時には(HTTPヘッダのような)プロトコルからの情報によって、言語が決定される。xml:langと呼ばれるアトリビュートをXMLは用い、また、言語を決定するために、ほかの文書言語に特定の方法があってもよい。

擬似クラス:lang(C)は、言語Cにおけるエレメントを表す。ここでCはHTML 4.01[HTML4.01]およびRFC 3066[RFC3066]で明示されているような言語のコードである。

例:

ベルギーのフランス語、あるいはドイツ語における、HTMLの文書を、二つの以下に続くセレクタは表す。次の二つのセレクタは、ベルギーのフランス語、あるいはドイツ語における、任意のエレメントの中の、qという引用文を表す。

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

6.6.4 UIのエレメントの状態の擬似クラス

:enabledおよび:disabledという擬似クラス

:enabledという擬似クラスの目的は、あるやり方(たとえば、マウスでボタン上でクリックする)において選択する/アクティブにすることができるユーザインタフェースのエレメントで、有効にされたエレメントを著作者がカスタマイズするのを可能にするというものである。無効であるときどのように見えるかを明示することなく、たとえば、有効なinputというエレメントのデフォルトの外観だけ、プログラムで明示する方法がないから、このような擬似クラスの必要がある。

:enabledと同様に、無効であるかアクティブでないユーザインタフェースのエレメントを著作者が明示することを:disabledは可能にする。

ほとんどのエレメントは有効でも無効でもないことに注意すべきである。使用者がアクティブにするか、あるいはフォーカスを移すことができれば、エレメントは有効である。もし、有効にできるはずであるのに、現在のところ、使用者がアクティブにするか、あるいはフォーカスを移したりできなければ、エレメントは無効である。

:checkedという擬似クラス

ラジオおよびチェックボックスのエレメントは、使用者によって切り替えることができる。メニューの項目の中には、使用者が選択すると"チェック"がつくものがある。そのようなエレメントが"オン"に切り替えられると、:checkedという擬似クラスが適用される。HTML4のセクション17.2.1の中で説明されているような、HTML4のselectedというアトリビュートをもっているエレメントに対しては、:checkedという擬似クラスは最初から適用されるが、もちろん使用者はそのようなエレメントを"オフ"に切り替えることができ、そのような場合においては、:checkedという擬似クラスはもはや適用されない。:checkedという擬似クラスが本質的に動的であり、使用者によって変更されるが、セマンティックHTML4のselectedというアトリビュートの存在にも基礎付けられるから、すべての媒体に適用される。

:indeterminateという擬似クラス

ラジオおよびチェックボックスのエレメントは、使用者によって切り替えられるが、時に、チェックされてはいないし、チェックされていないわけでもない、不確定の状態にあることもある。これは、エレメントのアトリビュート、またはDOMの取り扱いによってなりうる。:indeterminateという擬似クラスはそのようなエレメントに適用される。:indeterminateという擬似クラスは本質的に動的であり、使用者によって変更されるが、エレメントのアトリビュートの存在にも基礎付けられるから、すべての媒体に適用される。

あらかじめ選択されていないラジオグループの構成要素は、:indeterminateの状態のひとつの事例である。

6.6.5 構造上の擬似クラス

文書のツリーの中にあるが、ほかの単純なセレクタまたは結合子によって表現できない特別な情報に基づいた選択を可能にするために、構造上の擬似クラスの構想をセレクタは導入する。

自分の親の子のリストの中で、エレメントの位置を算定するときに、スタンドアロンのPCDATAは数えられないことに注意せよ。親の子のリストの中で、エレメントの位置を計算するとき、インデックスの番号付けは1から始まる。

:rootという擬似クラス

文書のルートであるエレメントを:rootという擬似クラスは現す。HTML4の場合においては、これはHTMLというエレメントである。XMLの場合においては、XMLの文書に対する、DTD、またはスキーマおよびネームスペースに適切であれば、何でもよい。

:nth-child()という擬似クラス

:nth-child(an+b)という擬似クラスの表記法は、nに与えられる正の整数または0の値に対して、文書のツリーの中で、自分の前にan+b-1個の兄弟を持っているエレメントを表す。言い換えれば、それぞれa個のエレメントのグループにすべての子が分割させられた後、エレメントのb番目の子にこれはマッチする。これは、たとえば、表の中のひとつおきの横の列をセレクタが扱うことを可能にし、たとえば、段落のテキストの色を4段落の周期で交互にするために使われる。aおよびbは、0、負の整数、または正の整数でなければならない。エレメントの最初の子のインデックスは、1である。

これに加えて、'odd'および'even'を引数に対して:nth-child()はとることができる。'odd'は2n+1と同じ語意を持ち、'even'は2nと同じ語意を持っている。

例:
tr:nth-child(2n+1) /* HTMLの表のすべての奇数の横の列を表す */
tr:nth-child(odd)  /* 同じ */
tr:nth-child(2n)   /* HTMLの表のすべての偶数の横の列を表す */
tr:nth-child(even) /* 同じ */

/* CSSにおける交互の段落の色 */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

a=0のときは、繰り返しは用いられないから、たとえば、:nth-child(0n+5)は五番目の子だけにマッチする。a=0のときは、aの部分が含まれる必要がないから、シンタックスは:nth-child(b)に簡略化され、最後の例は:nth-child(5)に簡略化される。

foo:nth-child(0n+1)   /* 親のエレメントの最初の子である、エレメントfooを表す */
foo:nth-child(1)      /* 同じ */

a=1のとき、数字が規則から省かれてもよいから、以下に続く例は同等である。

bar:nth-child(1n+0)   /* すべてのbarというエレメントを表す。特殊性(0,1,1) */
bar:nth-child(n+0)    /* 同じ */
bar:nth-child(n)      /* 同じ */
bar                   /* 同じだがより低い特殊性(0,0,1) */

b=0であれば、すべてのa番目のエレメントが選び取られる。

tr:nth-child(2n) /* HTMLの表のすべての偶数の横の列を表す */

文書のaもbも両方とも0と等しければ、擬似クラスは文書のツリーにおいてエレメントをひとつも表さない。

値aは負でもよいが、もちろん、n>=0に対するa+bの正の値だけが、文書のツリーの中のエレメントを表す。

html|tr:nth-child(-n+6)  /* XHTMLの表の最初の6つの横の列を表す */
:nth-last-child()という擬似クラス

:nth-last-child(an+b)という擬似クラスの表記法は、nに与えられる正の整数または0の値に対して、文書のツリーの中で、自分の後にan+b+1個の兄弟を持っているエレメントを表す。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

例:
tr:nth-last-child(-n+2)    /* HTMLの表の最後の二つの横の列を表す */

foo:nth-last-child(odd)    /* 親のエレメントの中のすべての奇数のfooというエレメント。
                              最後のものから数える */
:nth-of-type()という擬似クラス

:nth-of-type(an+b)という擬似クラスは、nに与えられる0または正の整数の値に対して、文書のツリーの中で、自分の前に同じエレメントの名前を持っているan+b-1個の兄弟があるエレメントを表す。言い換えれば、その種類のすべての子がそれぞれのa個のエレメントのグループに分割された後、その種類のb番目の子にこれはマッチする。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

たとえば、浮動させられる画像の位置を交互にすることをCSSにおいてこれは可能にする。
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
:nth-last-of-type()という擬似クラス

:nth-last-of-type(an+b)という擬似クラスの表記法は、nに与えられる0または正の整数の値に対して、文書のツリーの中で、自分の後に同じエレメントの名前を持っているan+b+1個の兄弟を持っているエレメントを表す。この引数のシンタックスについては、:nth-child()という擬似クラスを見よ。また、引数に対して'even'および'odd'という値も受け入れる。

たとえば、最初と最後のものを除いて、XHTMLのbodyのすべてのh2という子を表すためには、 以下に続くセレクタを用いるだろう。
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

また、この場合においては、:not()を用いることもできるだろう。ただし、セレクタはちょうど同じだけの長さで終わっている。

body > h2:not(:first-of-type):not(:last-of-type) 
:first-childという擬似クラス

:nth-child(1)と同じ。あるほかのエレメントの最初の子であるエレメントを:first-childという擬似クラスを表す。

例:

以下に続く例において、divというエレメントの最初の子であるpというエレメントをセレクタは表す。

div > p:first-child
このセレクタは、以下に続く断片のdivの中のpを表す。
<p> noteの前の最後のP。</p>
<div class="note">
   <p> noteの中の最初のP。</p>
</div>
しかし、以下に続く断片の二番目のpを表すことはできない。
<p> noteの前の最後のP。</p>
<div class="note">
   <h2>メモ</h2>
   <p> noteの中の最初のP。</p>
</div>
以下に続く二つのセレクタは同等である。
* > a:first-child   /* aはすべてのエレメントの最初の子である */
a:first-child       /* 同じ */
:last-childという擬似クラス

:nth-last-child(1)と同じ。あるほかのエレメントの最後の子であるエレメントを、:last-childという擬似クラスは表す。

順序付けられたリストolの最後の子であるリストの項目liを以下に続くセレクタは表す。

例:
ol > li:last-child
:first-of-typeという擬似クラス

:nth-of-type(1)と同じ。自分の親のエレメントの子のリストの中で、自分の種類の最初の兄弟であるエレメントを:first-of-typeという擬似クラスは表す。

例:

dt定義のリストdlの中の定義のタイトルdtで、以下に続くセレクタは表す。このdtは、自分の親のエレメントの子供のリストの中で、自分の種類の最初のものである。

dl dt:first-of-type
これは、三番目のものに対してではなく、以下に続く例における最初の二つのdtに対する有効な記述である。
<dl><dt>gigogne</dt>
        <dd><dl><dt>fus&eacute;e</dt>
                    <dd>多段式のロケット</dd>
                <dt>table</dt>
                    <dd>表のネスト</dd>
            </dl></dd>
</dl>
:last-of-typeという擬似クラス

:nth-last-of-type(1)と同じ。自分の親のエレメントの子供のリストの中で、自分の種類の兄弟であるエレメントを、:last-of-typeという擬似クラスは表す。

例:

表の横の列の最後のデータセルtdを以下に続くセレクタは表す。

tr > td:last-of-type
:only-childという擬似クラス

兄弟をひとつも持たないエレメントを表す。:first-child:last-child または:nth-child(1):nth-last-child(1)と同じであるが、低い特殊性を持つ。

:only-of-typeという擬似クラス

同じエレメントの名前を持っている兄弟が一つもないエレメントを表す。:first-of-type:last-of-typeまたは:nth-of-type(1):nth-last-of-type(1)と同じであるが、低い特殊性を持つ。

:emptyという擬似クラス

、子をひとつも持たないエレメントを:emptyという擬似クラスは表す。DOMの観点から、時によっては空のテキストのノードを含む。

例:

p:emptyは以下に続く断片の有効な表現である。

<p></p>

foo:emptyは以下に続く断片に対する有効な表現ではない。

<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>これは<bar>:empty</bar>ではない</foo>

6.6.6 内容の擬似クラス

テキストの内容が与えられた部分文字列を含むエレメントを、:contains("foo")という擬似クラスは表す。この擬似クラスの引数は、(二重引用符に囲まれた)文字列またはキーワードである。

内容の擬似クラスの使用は、静的なメディアタイプ([CSS2]を見よ)に限定される。

すべてのエレメントおよびサブエレメントの中に含まれる、すべてのPCDATAの連続によって、与えられたエレメントのテキストの内容は、決定される。

例:
p:contains("Markup")
は、
<p><strong>H</strong>yper<strong>t</strong>ext
   <strong>M</strong><em>arkup</em>
   <strong>L</strong>anguage</p>
の、部分的であるが、間違いのない、有効な記述である。

Unicodeの文字およびキャリッジリターンについては、エスケープの仕組みを用いて、内容の擬似クラスの引数の中に特別な文字を挿入できる。

警告: リスト<ul><li>... the greek letter chi</li><li>effective</li></ul>にセレクタul:contains("chief")はマッチしてしまう。

注: :contains()は、擬似エレメントではなく、擬似クラスである。上のHTMLの断片に適用される以下に続くCSSの規則は、単語"Markup"にだけ赤い背景を加えることはなく、全体の段落にそのような背景を加える。
P:contains("Markup") { background-color : red }

6.6.7 打消しの擬似クラス

打消しの擬似クラスは、引数として(打消しの擬似クラス自体及び擬似エレメントを除いて)単純なセレクタをとる、関数表記である。

例:

無効でない、HTMLにおけるすべてのbuttonというエレメントに、以下に続くCSSのセレクタはマッチする。

button:not([DISABLED])

FOOというエレメントでないすべてのものを以下に続くセレクタは表す。

*:not(FOO)

HTMLのリンクでないすべてのエレメントを以下に続くセレクタのグループは表す。

html|*:not(:link):not(:visited)

注: :not()という擬似は、無駄なセレクタを書くことを可能にする。たとえば、エレメントを一つも表さない:not(*|*)、あるいは高い特殊性を持つがfooと同じfoo:not(bar)。

7. 擬似エレメント

文書言語によって明示されたものの範囲を超えて、文書ツリーに関する抽象概念を擬似エレメントは生成する。たとえば、エレメントの内容の最初の文字、あるいは最初の行にアクセスする仕組みを、文書言語は提供しない。擬似クラスはこのアクセスできない情報を設計者が参照するのを可能にする。また、擬似クラスはソースの文書の中に存在しない内容を参照する方法も設計者に提供するかもしれない(たとえば、::beforeおよび::afterという擬似クラスは生成された内容へのアクセスを与える)。

擬似エレメントは、二つのコロン(::)とその次に続く擬似エレメントの名前からなる。

注: 擬似クラスと擬似エレメントの間の区別を重んじるために、当文書によってこの::という表記法は導入される。また、既存のスタイルシートとの互換性のために、CSSの水準1および2で導入された擬似エレメントに対する以前の一コロンの表記法も、ユーザエージェントは受け入れなければならない。CSSの水準3において導入される新しい擬似エレメントに対しては、この互換性は許容されない。

セレクタの実体を表す単純なセレクタの連続の中で、擬似エレメントはただ一度だけ現れてよい。

7.1 ::first-lineという擬似エレメント

エレメントで最初にフォーマットされる行を::first-lineという擬似エレメントは記述する。

たとえば、CSSにおいて

p::first-line { text-transform: uppercase }

"すべての段落の最初の行の文字を大文字に変えよ"ということを、上の規則は意味する。しかしながら、実際のHTMLのエレメントには、セレクタp::first-lineはマッチしない。適合するユーザエージェントがすべての段落の始まりに挿入する擬似エレメントに、これはマッチする。

ページの幅、フォントのサイズなどを含めて、最初の行の長さがいくつかの要因に左右されることに注意せよ。したがって、

<p>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

のような、もし上のスタイルの規則が適用されれば行が次のとおり描写される普通のHTMLの段落は、

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.

::first-lineのための架空のタグの一続きを含むため、ユーザエージェントによって"書き換え"られるかもしれない。どのようにプロパティが継承されるかを示すのに、架空のタグの一続きは役立つ。

<p><p::first-line> This is a somewhat long HTML
paragraph that</p::first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

擬似エレメントが実際のエレメントを分割するときは、架空のタグの一続きを閉じ、それから開きなおすことによって、望ましい効果を記述できる。だから、spanというエレメントのある前の段落をマークアップすれば、

<p><span class="test"> This is a somewhat</span> long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

::first-lineのための架空のタグの一続きに対して、適当な始まりと終わりのタグを、ユーザエージェントは生成することができるだろう。 the user agent could generate the appropriate start and end tags for the fictional tag sequence for ::first-line.

<p><span class="test"><p::first-line> This is a
somewhat</p::first-line></span><p::first-line>
long HTML paragraph that</p::first-line> will be broken into
several lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

::first-lineという擬似エレメントは、ブロック水準のエレメントにだけ加えることができる。

::first-lineという擬似エレメントは、インライン水準のエレメントと類似しているが、使用法に左右され、一定の制約がある。以下に続くプロパティだけが::first-lineという擬似エレメントに適用される。フォントのプロパティ、色のプロパティ、背景のプロパティ、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'および'clear'。

7.2 ::first-letterという擬似エレメント

エレメントで最初にフォーマットされる文字を::first-letterという擬似エレメントは記述する。

::first-letterという擬似エレメントは、すべてのエレメントに加えることができる。

よくある印刷上の効果である、"イニシャルキャップ"および"ドロップキャップ"のために、::first-letterという擬似クラスは用いられるかもしれない。もしその'float'というプロパティが'none'ならば、この種類の最初の文字はインライン水準のエレメントと類似しているが、使用法に左右され、一定の制約を持っている。ほかの状態では、これは浮動させられるエレメントと類似している。

これらは::first-letterに適用されるCSSのプロパティである。フォントのプロパティ、色のプロパティ、背景のプロパティ、'text-decoration'、'vertical-align'('float'が'none'のときのみ)、'text-transform'、'line-height'、マージンのプロパティ、パディングのプロパティ、ボーダーのプロパティ、'float'、'text-shadow'および'clear'。

ドロップキャップの最初の文字を、以下に続くCSS2は二行にわたるようにする。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>ドロップキャップの最初の文字</TITLE>
<STYLE type="text/css">
P               { font-size: 12pt; line-height: 12pt }
   P::first-letter { font-size: 200%; font-style: italic;
                     font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
</BODY>
</HTML>

この例は次のようにフォーマットされよう。

:first-letterおよび:first-lineという擬似エレメントの組み合わされた効果を例証している画像この画像の代替内容はおかしいと思われる。

架空のタグの一続きは

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>

である。

::first-letterという擬似エレメントのタグが内容(たとえば、最初の文字)と隣接することに注意せよ。pseudo-element tags abut the content (e.g., the initial character). ::first-lineと::first-letterという擬似エレメントの両方ともが用いられれば、::first-letterの架空のタグの一続きは、::first-lineの架空のタグの一続きの中に挿入される。

慣例であるドロップキャップのフォーマットを実現するために、ユーザエージェントは、フォントサイズを、たとえば、整列の基準線に近づけてもよい。また、フォーマットするときに標識のアウトラインを斟酌してもよい。

最初の文字に先行する括弧(たとえば、"開く"(Ps)、"閉じる"(Pe)および"その他"(Po)の括弧の種類の中で、Unicode[UNICODE]において定義されている文字)は、

最初の文字に先行する引用符は含まれるべきである。

のように含まれるべきだ。

::first-letterという擬似エレメントはエレメントの一部だけにマッチする。

言語の中には、ある文字の組み合わせを扱う方法について、特定の規則をもつものがある。たとえば、オランダ語において文字結合"ij"が単語の最初に現れれば、::first-letterという擬似エレメントの中に両方の文字があると考えられるべきである。エレメントの始まりから、開き括弧でない最初の文字群まで、::first-letterという擬似クラスは選択するべきだ。

重複している擬似エレメントがどのように互いに影響しあうのか、以下に続く例は例証する。それぞれのPというエレメントの最初の文字は、'24pt'のフォントサイズを用いた緑色である。最初にフォーマットされる行の残りは'blue'になり、段落の残りは'red'になる。

P { color: red; font-size: 12pt }
P::first-letter { color: green; font-size: 200% }
P::first-line { color: blue }

<P>二行で終わる、あるテキスト</P>

行分けは単語"end"の前で起こると仮定すると、この断片に対する架空のタグの一続きは、

<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>

となるだろう。

::first-letterというエレメントは::first-lineというエレメントの内部にあることに注意せよ。 ::first-lineに定められたプロパティは、::first-letterに継承されるが、何かのプロパティが::first-letter上に定められれば、上書きされる。

7.3 UIのエレメントの断片の擬似エレメント

::selectionという擬似エレメント

::selectionという擬似エレメントは、ユーザによって強調されている、文書の部分に適用される。また、たとえば編集できる欄の中にある選択されたテキストにも、これは適用される。(以前は:selectedと名づけられていた):checkedという擬似クラスと、この擬似クラスは混同されるべきではない。

::selectionという擬似エレメントは本質的に動的で、使用者の行為によって変更されるが、はじめは(画面のような)動的な媒体に描写されていた静的な媒体(印刷されたページのようなもの、[CSS2]を見よ)にUAが描写するとき、UAが、現在の::selectionの状態をほかの媒体に移し、同様に適切な整形および描写が同様に効果を生じさせることを期待するのは正当である。

これが::selectionという擬似エレメントに適用されるプロパティである。色、カーソル、背景、輪郭。::selection上の'background-image'というプロパティの計算された値は、無視されてもよい。

7.4 ::beforeおよび::afterという擬似エレメント

エレメントの内容の前あるいは後に生成される内容を描写するために、::beforeおよび::afterという擬似エレメントが用いられる。生成された内容/マーカーというCSS3のモジュールの中で説明される。

::first-letterおよび::first-lineという擬似エレメントが::beforeおよび::afterと組み合わせられると、挿入されたテキストを含んでいるエレメントの最初の文字または行に適用される。

8. 結合子

8.1 子孫の結合子

作者は、文書のツリーの中の別のエレメントの子孫であるエレメント(たとえば、"H1というエレメントの中に含まれるEMというエレメント")をセレクタに記述してもらいたいと、思うことがあるかもしれない。子孫の結合子はそのような関係を表現する。子孫の結合子は、単純なセレクタの二つの連続を隔てている空白である。形式"A B"のセレクタは、ある祖先のエレメントAの任意の子孫であるエレメントBを表す。

例:

たとえば、以下に続くセレクタを考えよ。

h1 em
h1というエレメントの子孫であるemというエレメントを表す。これは、以下に続く断片の、部分的であるが、正しく有効である記述である。
<h1>この<span class="myclass">見出しは<em>とても</em>重要である。</span></h1>
以下に続くセレクタ:
div * p
はdivというエレメントの孫またはより後の子孫であるpというエレメントを表す。"*"の両側の空白に注意せよ。

子孫の結合子とアトリビュートのセレクタを組み合わせた以下に続くセレクタは、(1)定められたhrefアトリビュートがあり、(2)それ自体divの内側にあるpの内側にあるエレメントを表す。

div p *[href]

8.2 子の結合子

子の結合子は二つのエレメントの親子関係を記述する。子の結合子は"大なり記号"(>)の文字でなっていて、単純なセレクタの二つの連続を区切る。

例:

以下に続くセレクタは、bodyの子であるpというエレメントを表す。

body > p

以下に続く例は子孫の結合子と子の結合子を組み合わせている。

div ol>li p

liの子孫であるpというエレメントをこれは表し、そのliというエレメントはolというエレメントの子でなければならず、そのolというエレメントはdivの子孫でなければならない。">"という結合子を囲む任意の空白が無視されていることに注目せよ。

エレメントの最初の子の選択に関する情報については、上の:first-childという擬似クラスに関する項を見よ。

8.3 隣接する兄弟の結合子

二つの異なる隣接する兄弟の結合子がある。直接隣接の結合子および間接隣接の結合子。

8.3.1 直接隣接の結合子

直接隣接の結合子は、単純なセレクタの二つの連続を区切る"プラス記号"(+)の文字でなっている。二つの連続によって表されるエレメントは、文書のツリーの中で同じ親を共有し、最初の連続によって表されたエレメントは、二番目のものによって表されるエレメントの直前に来る。

例:

したがって、mathというエレメントの直後に来るpというエレメントを以下に続くセレクタは表す。

math + p

アトリビュートのセレクタを加えていることを別にすれば、以下に続くセレクタは前の例におけるものと概念的に類似している。だから、class="opener"を持っていなければならないという制約をh1というエレメントに加える。

h1.opener + h2

8.3.2 間接隣接の結合子

間接隣接の結合子は、単純なセレクタの二つの連続を区切る"チルダ"(~)の文字でなっている。二つの連続によって表されたエレメントは、文書のツリーの中で同じ親を共有し、最初の連続のよって表されたエレメントは、二番目のものによって表されるエレメントの前に来る(必ずしも直前に来なくてよい)。

例:
h1 ~ pre
は、h1というエレメントの後に来るpreというエレメントを表す。これは、
<h1>関数aの定義</h1>
<p>関数a(x)は表の中のすべての数字に適用される。</p>
<pre>function a(x) = 12x/13.5</pre>
の、部分的であるが、正しく有効な記述である。

9. セレクタの特殊性の計算

セレクタの特殊性は以下のように計算される。

(大きな基数を持っている数の体系における)三つの数a-b-cを鎖状につなぐと、特殊性となる。

ある例:

*               /* a=0 b=0 c=0 -> 特殊性 =   0 */
LI              /* a=0 b=0 c=1 -> 特殊性 =   1 */
UL LI           /* a=0 b=0 c=2 -> 特殊性 =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> 特殊性 =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> 特殊性 =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> 特殊性 =  13 */
LI.red.level    /* a=0 b=2 c=1 -> 特殊性 =  21 */
#x34y           /* a=1 b=0 c=0 -> 特殊性 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 特殊性 = 101 */

注: HTMLのstyleというアトリビュートの中で明示されたスタイルの特殊性は、別のCSS3のモジュール"カスケードと継承"の中で説明される。

10. セレクタの文法

10.1 文法

下の文法は、セレクタのシンタックスを定義する。これは、全体的にはLL(1)であり、部分的にはLL(2)になりうる(が、文を解析する決まりを表現していないから、ほとんどのUAは直接用いるべきではない)。提示のフォーマットは人間の使用のために能率的に利用され、Yacc([YACC]を見よ)の範囲を超えた簡略表記法が用いられる。

提出は、

selectors_group
  : selector [ ',' S* selector ]*
  ;

selector
  /* there is at least one sequence of simple selectors in a */
  /* selector and the pseudo-elements occur only in the last */
  /* sequence ; only pseudo-element may occur */
  : [ simple_selector_sequence combinator ]*
       simple_selector_sequence [ pseudo_element ]?
  ;

combinator
  /* combinators can be surrounded by white space */
  : S* [ '+' | '>' | '~' | /* empty */ ] S*
  ;

simple_selector_sequence
  /* the universal selector is optional */
  : [ type_selector | universal ]?
        [ HASH | class | attrib | pseudo_class | negation ]+ |
    type_selector | universal
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo_class
  /* a pseudo-class is an ident, or a function taking an */
  /* ident or a string or a number or a simple selector  */
  /* (excluding negation and pseudo-elements) */
  /* or a an+b expression for argument */
  : ':' [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* [ IDENT | STRING | NUMBER |
                  expression | negation_arg ] S* ')'
  ;

expression
  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] | INTEGER
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo_class
  ;

pseudo_element
  : [ ':' ]? ':' IDENT
  ;

である。

10.2 語彙の走査機構

下記は、Flex( [FLEX]を見よ)の表記法で書かれたトークン化子である。トークン化子は大文字・小文字の区別がない。

二度出現する"\377"は、Flexの現在のバージョンが扱うことのできる最大の数(十進法の255)を表す。Unicode/ISO-10646の最大限のコードのポイントである"\4177777"として読まれるべきだ。

%option case-insensitive

h                       [0-9a-f]
nonascii                [\200-\377]
unicode                 \\{h}{1,6}[ \t\r\n\f]?
escape                  {unicode}|\\[ -~\200-\377]
nmstart                 [a-z_]|{nonascii}|{escape}
nmchar                  [a-z0-9-_]|{nonascii}|{escape}
string1                 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2                 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident                   {nmstart}{nmchar}*
name                    {nmchar}+
integer                 [-]?[0-9]+
signed_integer          [-+][0-9]+
num                     {integer}|[0-9]*"."[0-9]+
string                  {string1}|{string2}
nl                      \n|\r\n|\r|\f
%%

[ \t\r\n\f]+    {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/   /* ignore comments */

"~="                    {return INCLUDES;}
"|="                    {return DASHMATCH;}
"^="                    (return PREFIXMATCH;)
"$="                    (return SUFFIXMATCH;)
"*="                    (return SUBSTRINGMATCH;)
{string}                {return STRING;}
{ident}                 {return IDENT;}
{ident}"("              {return FUNCTION;}
{num}                   {return NUMBER;}
{signed_integer}        {return SIGNED_INTEGER;}
{integer]               {return INTEGER;}
"#"{name}               {return HASH;}

.                       {return *yytext;}

11. ネームスペースとダウンレベルクライアント

重大な問題点は、この文書より先に製作されたウェブクライアントにおける、XMLの文書とCSSのセレクタの相互の影響である。あいにく、ネームスペースのプレフィックスではなく、ネームスペースを識別するURIに基礎付けられてネームスペースがマッチされなければならないという事実のために、同様にURIによってCSSにおけるネームスペースを識別することが必要とされるものも、操作の手順の中にはある。そのような手順なしでは、XMLの文書のでたらめな一そろいに対して、すべての場合においてセレクタが正しくマッチするCSSのスタイルシートを作成することは、不可能である。しかしながら、スタイルシートが適用されることになるXMLの文書について完全な情報が与えられ、XMLの文書の中で制限されたネームスペースの使用が行われれば、セレクタが正しくエレメントとアトリビュートにマッチするスタイルシートを作成することは、可能である。

ネームスペースの修飾されたエレメントの種類またはアトリビュートのセレクタを使用するすべてのスタイルの規則と同様に、@namespaceというアット規則をダウンレベルのCSSのクライアントは(もしCSSの前方互換の解析規則に正しく従えば)無視する。CSSの中でネームスペースのプレフィックスの範囲を定めるシンタックスは、ダウンレベルのCSSのクライアントが、ことによると不正確にマッチするよりもむしろ、スタイルの規則を無視するように計画的に選ばれた。

ネームスペースの認識があるCSSのクライアントも、ダウンレベルクライアントも、両方とも機能を果たすエレメントの種類のセレクタを書くことを、CSSにおけるデフォルトのネームスペースの使用は可能にする。

次に続く事柄は、この提案を実装しないウェブクライアントにおいて、正しく機能を果たすスタイルシートを作成することが可能なシナリオと実例である。

  1. XMLの文書がネームスペースを利用しない。
  2. XMLの文書が文書中で単一のデフォルトのネームスペースを定義する。ネームスペースのプレフィックスはエレメントの名前においてひとつも用いられない、
  3. XMLの文書はデフォルトのネームスペースを用いない。スタイルシートの著作者には、用いられるすべてのネームスペースのプレフィックスが知られていて、ネームスペースのプレフィックスとネームスペースのURIの間に、直接のマッピングがある。(XMLの文書中で、与えられたプレフィックスは、ひとつのネームスペースのURIにだけマップされてもよい。同じURIにマップされる複数のプレフィックスがあってもよい)。

ほかのシナリオに関しては、XMLにおいて用いられるネームスペースのプレフィックスを、スタイルシートの作者があらかじめ知っていない、あるいは、デフォルトネームスペースを用いているエレメントとともに、ネームスペースを持っていないエレメントの組み合わせが用いられている、あるいは、同じ文書において、または異なる文書において、違ったネームスペースのURIに、同じネームスペースのプレフィックスがマップされているときは、その文書の中のすべてのエレメントに対して正しく機能を果たすCSSのスタイルシートを作成することは不可能である。ただし、(この文書や同様のものによって概説されているような)URIのシンタックスを用いてスタイルシートが書かれていて、CSSとXMLの認識のあるクライアントによって文書が処理されていれば話は別である。

12. プロフィール

セレクタを用いているそれぞれの仕様書は、許容また除外するW3Cのセレクタのサブセットを定義し、サブセットのすべての構成要素の局所的な意味を説明しなければならない。

規範的でない例:

セレクタのプロフィール
仕様書 CSSの水準1
容認 種類のセレクタ
クラスのセレクタ
IDのセレクタ
:link、:visitedおよび:activeという擬似クラス
子孫の結合子
:first-lineおよび:first-letterという擬似エレメント
除外

普遍的なセレクタ
アトリビュートのセレクタ
:hoverおよび:focusという擬似エレメント
:targetという擬似クラス
:lang()という擬似クラス
すべてのUIのエレメントの状態の擬似クラス
すべての構造上の擬似クラス
:contains()という擬似クラス
打消しの擬似クラス
すべてのUIのエレメントの断片の擬似エレメント
::beforeおよび::afterという擬似エレメント
子の結合子
隣接する兄弟の結合子

ネームスペース

特殊な制約 ただひとつのクラスのセレクタが単純なセレクタの連続ごとに許容される

 
 
セレクタのプロフィール
仕様書 CSSの水準2
容認 種類のセレクタ
普遍的なセレクタ
アトリビュートの存在と値のセレクタ
クラスのセレクタ
IDのセレクタ
:link、:visited、:active、:hover、:focus、:lang()および:first-childという擬似クラス
子孫の結合子
子の結合子
隣接する直接の結合子
::first-lineおよび::first-letterという擬似エレメント
::beforeおよび::afterという擬似エレメント
除外

内容のセレクタ
部分文字列にマッチするアトリビュートのセレクタ
:targetという擬似クラス
すべてのUIのエレメントの状態の擬似クラス
:first-childよりほかのすべての構造上の擬似クラス
:contains()という擬似クラス
打消しの擬似クラス
すべてのUIのエレメントの断片の擬似エレメント
隣接する間接の結合子

ネームスペース

特殊な制約 単純なセレクタの連続ごとのひとつ以上のクラスのセレクタ(CSS1の制約)が許容される

CSSにおいては、どのスタイルの規則が文書のツリーの中のエレメントに適用されるかを決定するパターンマッチングの規則を表現する。

以下に続くセレクタ(CSSの水準2)は、セクション1のヘッダh1の内側の、nameというアトリビュートのある、すべてのアンカーaにマッチする。

h1 a[name]

すべてのCSSの宣言は、それにマッチするエレメントにそのようなセレクタが適用されるように加えられた。

セレクタのプロフィール
仕様書 STTS 3
容認

種類のセレクタ
普遍的なセレクタ
アトリビュートのセレクタ
クラスのセレクタ
IDのセレクタ
すべての構造上の擬似クラス
:contains()という擬似クラス
すべての結合子

ネームスペース

除外 許容されない擬似クラス

特殊な制約 セレクタや結合子の中には、STTSの宣言の右側の断片の説明の中では許容されないものもある。

セレクタは、二つの異なった方法でSTTS 3の中で用いられる。

  1. CSSの選択の仕組みと同等の選択の仕組み: 与えれれたセレクタに添えられた宣言は、セレクタの中でマッチするエレメントに適用される。
  2. 宣言の右側に現れる断片の記述。

13. 適合と必要条件

この項は現在の仕様書との適合だけを定義する。

個々のデバイスの制限のためにこの仕様書の一部をユーザエージェントが実装することができない(たとえば、対話的でないユーザエージェントは、おそらく、動的な擬似クラスを、対話なしでは意味を成さないから、実装しないだろう)ことは、不適合を意味しない。

セレクタを再利用するすべての仕様書は、それが容認し、除外するセレクタのサブセットを表にし、本仕様書に加える制限を説明するプロフィールを含まなければならない。

たとえば、認識されていないトークン、あるいは現在解析している箇所で許容されていないトークンのように、解析時にエラーがあると、無効になる。

解析時のエラーの扱いに関して、ユーザエージェントは規則を遵守しなければならない

[CWWW]によって定義されてたように、"テキストデータの受取人"としてこの仕様書の実装は振舞わなければならない。(特に、実装は、当然データが基準に合わせられている、と思わなければならず、それを基準にあわせることをしてはならない。)マッチングのための規範的な規則は、[CWWW]および[UNICODE]の中で定義され、この仕様書の実装に適用される。

14. テスト

仕様書の基本的な適合をユーザエージェントが実証することを可能にするテストスイートを、この仕様書は含む。テストスイートはあえて徹底的なものであろうとはせず、セレクタのすべての考えられる組み合わされた事例を含まない。

このテストは利用可能である[今後リンクが来よう]。

15. 謝意

この仕様書はカスケードを行うスタイルシートとフォーマットを行うプロパティに関するW3Cの策定団体の成果である。この仕様書の編集者に加えて、策定団体の会員は、

のかたがたである。

策定団体に招待させていただいた多数の専門家は、著しくCSS3に貢献されている。L. David Baron、Tim Boland (NIST)、Todd Fahrner、Daniel Glazman、Ian Hickson、Eric Meyer (The OPAL Group)、Jeff Veen。

策定団体の以前の会員:

このかたがた(会員、招待させていただいた専門家および前の会員)すべてに、その努力に対して感謝申し上げる。

もちろん、この文書はCSSの水準1およびCSSの水準2の勧告から出ている。すべてのCSS1およびCSS2の著作者、編集者、そして貢献者に感謝申し上げる。

策定団体がずっと複雑な解決策を考えているとき、Hasan Ali Çelik博士は:nth-child()に対して、引数の単純で、かつ力強いシンタックスを提案してくださった。

www-style@w3.org上の議論は、多数の重要な問題点に影響を及ぼしている。とりわけ、Ian Graham、David Baron、Björn Höhrmann、fantasai、Jelks CabanisおよびMatthew Brealeyに、その積極的で有用な関与に対して感謝申し上げる。

16. 参考文献

  1. [CSS1] Bert Bos, Håkon Wium Lie; "Cascading Style Sheets, level 1", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999
    (http://www.w3.org/TR/REC-CSS1)
  2. [CSS2] Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs, editors; "Cascading Style Sheets, level 2", W3C Recommendation, 12 May 1998
    (http://www.w3.org/TR/REC-CSS2/)
  3. [CWWW] Martin J. Dürst, François Yergeau, Misha Wolf, Asmus Freytag, Tex Texin, editors; "Character Model for the World Wide Web", W3C Working Draft, 26 January 2001
    (http://www.w3.org/TR/2001/WD-charmod-20010126)
  4. [FLEX] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
  5. [HTML4.01] Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "HTML 4.01 Specification", W3C Recommendation, 24 December 1999
    (http://www.w3.org/TR/html401/)
  6. [MATH] Patrick Ion, Robert Miner; "Mathematical Markup Language (MathML) 1.01", W3C Recommendation, revision of 7 July 1999
    (http://www.w3.org/1999/07/REC-MathML-19990707)
  7. [NMSP] Peter Linss, editor; "CSS Namespace Enhancements (Proposal)", W3C Working Draft, 25 June 1999
    (http://www.w3.org/1999/06/25/WD-css3-namespace-19990625/)
  8. [RFC3066] H. Alvestrand; "Tags for the Identification of Languages", Request for Comments 3066, January 2001
    (http://www.ietf.org/rfc/rfc3066.txt)
  9. [STTS3] Daniel Glazman ; "Simple Tree Transformation Sheets 3", Electricité de France, submission to the W3C, 11 Nov 1998
    (http://www.w3.org/TR/NOTE-STTS3)
  10. [SVG] Jon Ferraiolo ed.; "Scalable Vector Graphics (SVG) 1.0 Specification", W3C Proposed Recommendation, 19 July 2001
    (http://www.w3.org/TR/2001/PR-SVG-20010719)
  11. [UI] Tantek Çelik, editor; "User Interface for CSS3", W3C Working Draft, 16 February 2000
    (http://www.w3.org/TR/2000/WD-css3-userint-20000216)
  12. [UNICODE] "The Unicode Standard: Version 3.0.1", The Unicode Consortium, Addison Wesley Longman, 2000, ISBN 0-201-61633-5.
    URL: http://www.unicode.org/unicode/standard/versions/Unicode3.0.1.html.
    The latest version of Unicode. For more information, consult the Unicode Consortium's home page at http://www.unicode.org/.
  13. [XML-NAMES] Tim Bray, Dave Hollander, Andrew Layman, editors; "Namespaces in XML", W3C Recommendation, 14 January 1999
    (http://www.w3.org/TR/REC-xml-names/)
  14. [YACC] "YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975

[PR]‹C‚ɂȂ锧r‚ê‚ɏ‚¢¹±I:ŽR“c—{–Iê––I–¨‰»Ï•i‚¨ŽŽ‚µ1050‰~