セレクタ Level 3

2011年9月29日付 W3C 勧告 (Recommendation)

この版:

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/

最新版:

http://www.w3.org/TR/css3-selectors/

前の版:

http://www.w3.org/TR/2009/PR-css3-selectors-20091215/

Editors:

Tantek Çelik (Invited Expert)

Elika J. Etemad (Invited Expert)

Daniel Glazman (Disruptive Innovations SARL)

Ian Hickson (Google)

Peter Linss (former editor, Netscape/AOL)

John Williams (former editor, Quark, Inc.)

仕様の規範的な内容が修正された可能性があるため、errata もあわせて参照されたい。

この文書の翻訳については 翻訳データベース を参照されたい。訳注：この文書は日本語訳である。

Copyright © 2011 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.

---

概要

セレクタはツリー中の要素にマッチするパターンであり、XML 文書からノードを選択する際に用いられる手法のひとつである。セレクタは HTML や XML との利用に最適化されており、パフォーマンスが重要なコードで利用しやすいように設計されている。

CSS (Cascading Style Sheets) は HTML や XML 文書の、スクリーン上、紙、音声などにおける描画方法を指定する言語だ。CSS はセレクタを利用し、文書内の要素にスタイルプロパティを関連付ける。

この文書では CSS1 [CSS1] や CSS2 [CSS21] ですでに存在するセレクタに加え、CSS3 や他の言語で必要とされうる新しいセレクタについて定義する。

セレクタは次の関数を定義する。

式 (expression) ∗ 要素 (element) → 真偽値 (boolean)

つまり、要素とセレクタが与えられた際に、その要素がそのセレクタにマッチするかをこの仕様は定義することになる。

これらの式はたとえば、一連の要素もしくは要素群のなかの1つの要素を、サブツリー中のすべての要素に対しその式を評価することで選択する際に用いられる。XML ツリー変換言語 STTS (Simple Tree Transformation Sheets) はこのメカニズムを利用する。[STTS3]

この文書のステータス

このセクションは、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

W3C 勧告は広く検証され、実装可能と判断された成熟した文書である。W3C はこの仕様の実装を奨励している。仕様に関するコメントの公開メーリングリスト www-style@w3.org (アーカイブ) への送信を奨励している (メーリングリストへの 参加手順 も参照されたい)。メールを送信する際には、"css3-selectors" を件名に含めていただきたい。たとえば "[css3-selectors] …コメントの要約…" といった形が望ましい。

この文書は W3C Member, ソフトウェア開発者、そしてその他の W3C グループや関係者によって評価が行われ、Director によって W3C 勧告と承認された。この文書は安定しており、参考資料として、または他の文書からの引用に利用されることがあるだろう。仕様の勧告において W3C の果たす役割とは、仕様に注目させ、その普及を促すことである。これにより、Web の機能と相互運用性の向上が期待できる。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

別途用意した 実装レポート にはテストスイートが含まれており、この仕様の実装がいくつかあることを示している。

この文書は以前の勧告案と比べ、表面的な編集や参考文献の更新を除き同一である。

目次

• 1. はじめに
  • 1.1. 依存関係
  • 1.2. 用語
  • 1.3.CSS2 からの変更点
• 2. セレクタ
• 3. 大文字と小文字の区別
• 4. セレクタの構文
• 5. セレクタのグループ化
• 6. 単体セレクタ
  • 6.1. 型セレクタ
    • 6.1.1. 型セレクタと名前空間
  • 6.2. 全称セレクタ
    • 6.2.1. 全称セレクタと名前空間
  • 6.3. 属性セレクタ
    • 6.3.1. 属性存在セレクタと属性値セレクタ
    • 6.3.2. 部分マッチ属性セレクタ
    • 6.3.3. 属性セレクタと名前空間
    • 6.3.4. DTD における属性の規定値
  • 6.4. クラスセレクタ
  • 6.5. ID セレクタ
  • 6.6. 擬似クラス
    • 6.6.1. 動的擬似クラス
      • 6.6.1.1. リンク擬似クラス ― :link, :visited
      • 6.6.1.2. ユーザーアクション擬似クラス ― :hover, :active, :focus
    • 6.6.2. ターゲット擬似クラス ― :target
    • 6.6.3. 言語情報擬似クラス ― :lang
    • 6.6.4. UI 要素状態擬似クラス
      • 6.6.4.1. :enabled, :disabled 擬似クラス
      • 6.6.4.2. :checked 擬似クラス
      • 6.6.4.3. :indeterminate 擬似クラス
    • 6.6.5. 構造擬似クラス
      • 6.6.5.1. :root 擬似クラス
      • 6.6.5.2. :nth-child() 擬似クラス
      • 6.6.5.3. :nth-last-child() 擬似クラス
      • 6.6.5.4. :nth-of-type() 擬似クラス
      • 6.6.5.5. :nth-last-of-type() 擬似クラス
      • 6.6.5.6. :first-child 擬似クラス
      • 6.6.5.7. :last-child 擬似クラス
      • 6.6.5.8. :first-of-type 擬似クラス
      • 6.6.5.9. :last-of-type 擬似クラス
      • 6.6.5.10. :only-child 擬似クラス
      • 6.6.5.11. :only-of-type 擬似クラス
      • 6.6.5.12. :empty 擬似クラス
    • 6.6.6. (空)
    • 6.6.7. 否定擬似クラス ― :not
• 7. 擬似要素
  • 7.1. ::first-line 擬似要素
    • 7.1.1. CSS における最初の整形済行の定義
  • 7.2. ::first-letter 擬似要素
    • 7.2.1. CSS での適用
  • 7.3. (空)
  • 7.4. ::before, ::after 擬似要素
• 8. 結合子
  • 8.1. 子孫結合子 (子孫セレクタ)
  • 8.2. 子結合子 (子セレクタ、子供セレクタ、直下セレクタ)
  • 8.3. 兄弟結合子 (兄弟セレクタ)
    • 8.3.1. 隣接兄弟結合子 (隣接兄弟セレクタ、隣接セレクタ)
    • 8.3.2. 一般兄弟結合子 (一般兄弟セレクタ、間接セレクタ)
• 9. セレクタの詳細度計算
• 10. The grammar of Selectors
  • 10.1. Grammar
  • 10.2. Lexical scanner
• 11. プロファイル
• 12. 適合性と要件
• 13. Tests
• 14. Acknowledgements
• 15. References
  • 15.1. Normative References
  • 15.2. Informative References

1. はじめに

セレクタ Level 1 および Level 2 はそれぞれ、CSS1, CSS2.1 仕様で定義されるセレクタ機能のサブセットとして定義される。

1.1. 依存関係

この仕様中のいくつかの機能は CSS 固有である、あるいは、特定の制限もしくは CSS 固有のルールを持つ。この仕様では、それらを CSS 2.1 の観点から説明する。

1.2. 用語

この仕様中のテキストは例、注釈、非規範的 (non-normative) と明示的に示されたものを除き、規範的 (normative) である。

他の用語が [CSS21] の Definitions セクションで定義されている。例にある文書のソース、あるいはソースの一部は XML [XML10] もしくは HTML [HTML401] の構文に準ずる。

1.3. CSS2 からの変更点

このセクションは非規範的である。

この仕様で定義されるセレクタと CSS2 のセレクタについて、主な違いは次のとおり。

• 基本的な定義 (セレクタ、セレクタグループ、単体セレクタ、など) の定義が変更された。とくに、CSS2 で単体セレクタ (simple selector) と呼ばれていたものは単体セレクタシーケンス (sequence of simple selectors) と呼ばれるようになり、"単体セレクタ" はそのシーケンスからなるコンポーネントを指す言葉として使われるようになった。
• 型セレクタ、全称セレクタ、属性セレクタが任意の名前空間コンポーネントを含められるようになった。
• 新しい結合子 が追加された。
• 部分マッチ属性セレクタ (substring matching attribute selectors) を含む、新しい単体セレクタおよび新しい擬似クラスが追加された。
• 新しい擬似要素が追加された。また、擬似要素は "::" から始まるという規約が導入された。
• 文法が書き直された。
• セレクタ仕様を統合し、その仕様でどのセレクタがサポートされるかを定義したプロファイルが追加された。
• セレクタは CSS3 のモジュールとなり、独立した仕様になった。これにより他の仕様が CSS に依存せずセレクタのみを参照可能となった。
• 仕様が固有のテストスイートを持つようになった。

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" 属性が空白区切りの値をとり、その値の1つが "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[foo|="en"]	"foo" 属性の値がハイフン区切りの値をとり、その値が "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	ハイパーリンクのアンカーである E 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの	リンク擬似クラス	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	UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの	UI 要素状態擬似クラス	3
E:checked	UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスやラジオボタンなど)	UI 要素状態擬似クラス	3
E::first-line	E 要素の最初の整形済行	::first-line 擬似要素	1
E::first-letter	E 要素の先頭文字	::first-letter 擬似要素	1
E::before	E 要素の内容の前にある generated content	::before 擬似要素	2
E::after	E 要素の内容の後にある generated content	::after 擬似要素	2
E.warning	"warning" クラスを持つ E 要素 (クラスの決定方法は文書言語が規定する)	クラスセレクタ	1
E#myid	"myid" という ID を持つ 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. 大文字と小文字の区別

すべてのセレクタ構文は、ASCII 範囲内で case-insensitive であり、大文字と小文字を区別しない (つまり、[a-z] と [A-Z] は等価になる)。しかし、セレクタの制御範囲外の箇所については異なる。文書言語の要素名、属性名、属性値における大文字と小文字の区別はその文書言語に依存する。たとえば、HTML において要素名は case-insensitive であり、大文字と小文字を区別しないが、XML において要素名は case-sensitive であり、大文字と小文字を区別する。名前空間接頭辞における大文字と小文字の区別は[CSS3NAMESPACE] で定義されている。

4. セレクタの構文

セレクタ は、1つ以上の 単体セレクタシーケンス を 結合子 で区切ったものになる。セレクタ中最後に現れる単体セレクタシーケンスには、擬似要素 を付随することができる (MAY)。

単体セレクタシーケンス は 結合子 で区切られていない 単体セレクタ を表す。単体セレクタシーケンスは常に 型セレクタ もしくは全称セレクタ から始まる。シーケンス中に他の型セレクタもしくは全称セレクタの出現は許可されない。

単体セレクタ は 型セレクタ、全称セレクタ、属性セレクタ、クラスセレクタ、ID セレクタ、擬似クラス のいずれかとなる。

結合子 は、空白、大なり記号 (U+003E, >)、プラス記号 (U+002B, +)、チルダ (U+007E, ~) になる。結合子と単体セレクタの間もしくは外側には空白が現れてもよい。空白としては "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), "form feed" (U+000C) のみが認められる。"em-space" (U+2003) や "ideographic space" (U+3000) など、他の空白に似た文字が空白となることはない。

セレクタによって表される文書中の要素は セレクタの対象 と呼ばれる。1つの単体セレクタシーケンスからなるセレクタは、その要件を満たすどの要素をも表す。ここに新しい単体セレクタシーケンスを与え、それらを結合子でつないだシーケンスは、マッチする制約を追加する。これにより、セレクタの対象は常に、最後の単体セレクタシーケンスによって表された要素のサブセットとなる。

単体セレクタシーケンスや擬似要素を持たないセレクタは空のセレクタと呼ばれ、これは invalid なセレクタ となる。

セレクタ中の文字は CSS 中の エスケープ規則 と同じく、バックスラッシュでエスケープすることができる [CSS21]。

いくつかのセレクタは名前空間接頭辞をサポートする。どの名前空間接頭辞が宣言されたかを知るためのメカニズムは、セレクタを利用する言語で定義されるべきだ。言語が名前空間接頭辞の宣言メカニズムを定義しない場合、接頭辞は宣言されない。CSS において、名前空間接頭辞は @namespace 規則によって宣言される [CSS3NAMESPACE]。

5. セレクタのグループ化

カンマ (U+002C) で区切られた一連のセレクタは、各セレクタによって選択されたすべての要素の和集合を表す。たとえば、CSS において、いくつかのセレクタが共通の宣言を持つとき、それらはカンマ区切りのリストとしてグループ化することができる。カンマの前後には、空白を記述することができる。

CSS における例:

この例では、次の同一の宣言を表す3つの規則を1つにまとめている。

h1 { font-family: sans-serif }  h2 { font-family: sans-serif }  h3 { font-family: sans-serif }

これらの規則は次と等価である。

h1, h2, h3 { font-family: sans-serif }

注意: 上記2つの規則が等価であるのは、全てのセレクタが妥当なセレクタであることによる。もしこれらのセレクタうち1つでも invalid になった場合、全てのセレクタグループが invalid になる。そうなると、後者では3つの見出しすべてに与えた規則が invalid となる。いっぽう、前者では invalid なセレクタをもつ規則のみが invalid となる。

invalid な CSS の例:

h1 { font-family: sans-serif }  h2..foo { font-family: sans-serif }  h3 { font-family: sans-serif }

これらの規則は次と等価ではない。

h1, h2..foo, h3 { font-family: sans-serif }

これは後者のセレクタグループ (h1, h2..foo, h3) がすべて invalid となり、すべてのスタイル規則が破棄されるからである。(セレクタがグループ化されていない場合、h2..foo に与えられた規則のみが破棄される。)

6. 単体セレクタ

6.1. 型セレクタ

型セレクタ は文書言語の要素名を CSS 修飾名 の構文で表記したものになる [CSS3NAMESPACE]。型セレクタは文書ツリー内の要素型のインスタンスを表す。

例:

次の例は文書ツリー中の h1 要素を表すセレクタになる

h1

6.1.1. 型セレクタと名前空間

型セレクタは任意で名前空間コンポーネントを持つ。名前空間コンポーネントは、事前に 宣言 された名前空間接頭辞と要素名を名前空間区切り子 "vertical bar" (U+007C, |) で区切ったものを指す。(XML における名前空間の利用例は [XML-NAMES] を参照されたい。)

セレクタがどの名前空間にも属さない要素のみを表すため、名前空間コンポーネントは空 (接頭辞と区切り子を持たない) であってもよい。

セレクタが名前空間を問わず (名前空間に属さないものも含め) 要素を選択できるよう、名前空間接頭辞にアスタリスクを利用してもよい。

名前空間コンポーネントを持たない (名前空間区切り子を持たない) 型セレクタは名前空間に属さない要素 ("*|" と等価) を表す。しかし、名前空間を持つセレクタ (CSS スタイルシートなど) 規定の名前空間が 宣言 された場合はこの通りではない。規定の名前空間が宣言された場合、名前空間コンポーネントを持たない型セレクタは、規定の名前空間内の要素のみを表す。

型セレクタが名前空間接頭辞を持ちながら、その接頭辞に対し名前空間が 宣言 されていない場合、そのセレクタは invalid となる。

名前空間を理解するクライアントにおいて、型セレクタの要素名の箇所 (名前空間区切り子以降の部分) は、修飾名 の ローカル部にのみ対しマッチする。

以上を要約すると、次のようになる。

ns|E

名前空間 ns に属する要素 E にマッチする。

*|E

要素 E について名前空間を問わずすべてにマッチする。名前空間に属さない要素 E にもマッチする。

|E

どの名前空間に属さない要素 E にマッチする。

E

セレクタに対し規定の名前空間が 宣言 されていない場合は *|E と等価になる。それ以外の場合は規定の名前空間を ns として、ns|E と等価になる。

CSS における例:

@namespace foo url(http://www.example.com);   foo|h1 { color: blue }  /* first rule */   foo|* { color: yellow } /* second rule */   |h1 { color: red }      /* ...*/   *|h1 { color: green }   h1 { color: green }

1番目の規則 (@namespace 規則を含まない) は、"http://www.example.com" 名前空間に属する h1 要素のみにマッチする。

2番目の規則は、"http://www.example.com" 名前空間に属するすべての要素にマッチする。

3番目の規則は名前空間に属さない h1 要素のみにマッチする。

4番目の規則は名前空間を問わずすべての h1 要素にマッチする (名前空間に属さないものも含む)。

5番目の規則は規定の名前空間が定義されていないため、4番目の規則と等価になる。

6.2. 全称セレクタ

全称セレクタ はローカル名にアスタリスク (* U+002A) を持つ CSS 修飾名 [CSS3NAMESPACE] として表記され、すべての要素型に対する修飾名を表す。全称セレクタはすべての要素を名前空間を問わず (名前空間に属さないものも含む) 表す。ただし、規定の名前空間がセレクタに対し指定されている場合はこの通りではない。規定の名前空間が指定されたときの処理については、次の 全称セレクタと名前空間 を参照されたい。

全勝セレクタ * (名前空間接頭辞なし) が 単体セレクターシーケンス 中のコンポーネントたった1つではなく、また直後に 擬似要素が存在しない場合、その * を省略し全称セレクタの存在を暗示させてもよい。

例:

• *[hreflang|=en] と [hreflang|=en] は等価である。
• *.warning と .warning は等価である。
• *#myid と #myid は等価である。

Note: 混乱を避けるため * は省略しないことが望ましいだろう。混乱とはたとえば div :first-child と div:first-child の違いを考えると分かりやすい。この場合は div *:first-child と記したほうが理解しやすいだろう。

6.2.1. 全称セレクタと名前空間

全称セレクタは任意で名前空間コンポーネントを持つ。次のように使われる。

ns|*

名前空間 ns に属するすべての要素にマッチする。

*|*

すべての要素にマッチする。

|*

どの名前空間も属さないすべての要素にマッチする。

*

規定の名前空間が指定されていない場合は *|* と等価になる。それ以外の場合は規定の名前空間を ns として、ns|* と等価になる。

全称セレクタが名前空間接頭辞を持ちながら、その接頭辞に対し名前空間が 宣言 されていない場合、そのセレクタは invalid となる。

6.3. 属性セレクタ

セレクタは要素の属性の表現も行える。セレクタが要素にマッチする式として利用される場合、属性セレクタはそのセレクタによって表現される属性にマッチする属性を持つ要素にマッチする。

6.3.1. 属性存在セレクタと属性値セレクタ

CSS2 では次の4つの属性セレクタが定義されている。

[att]

att 属性を持つ要素を表す。属性値が何であるかは問わない。

[att=val]

値が "val" である att 属性を持つ要素を表す。

[att~=val]

値が 空白 区切りの単語を持てる att 属性において、値の1つに "val" を持つ要素を表す。"val" に空白が入る場合、そのセレクタは何も表さない (これは単語は空白によって区切られているものだからである)。また、"val" が空文字列である場合においても、セレクタは何も表さない。

[att|=val]

値が "val" もしくは "val" に続き "-" (U+002D) という文字列で始まる att 属性を持つ要素を表す。このセレクタは主に、BCP 47 ([BCP47]) もしくはその改訂版で定義される言語サブコードのマッチング (HTML の a 要素の hreflang 属性など) を行えるように用意されている。lang 属性 (もしくは xml:lang) による言語サブコードマッチングについては、:lang 擬似クラス の項を参照されたい。

属性値は CSS の 識別子 もしくは 文字列 でなければならない [CSS21]。属性セレクタにおける属性名や属性値の大文字と小文字の区別については、文書言語に依存する。

例:

次の属性セレクタは title 属性を持つ h1 要素を表す。title 属性の値は問わない。

h1[title]

次のセレクタは、class 属性の値が "example" である span 要素を表す。

span[class="example"]

要素が持ついくつかの属性もしくは同じ属性が持ついくつかの条件について、それらを表すために複数の属性セレクタを利用できる。次のセレクタは、 hello 属性が "Cleveland" で goodbye 属性が "Columbus" である span 要素を表す。

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

次の CSS 規則は "=" と "~=" の違いを説明する。1番目のセレクタはたとえば rel 属性の値に "copyright copyleft copyeditor" を持つ a 要素にマッチする。いっぽう、2番目のセレクタは href 属性の値が "http://www.w3.org/" である a 要素のみにしかマッチしない。

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

次のセレクタは hreflang 属性の値が "fr" である a 要素を表す。

a[hreflang=fr]

次のセレクタは hreflang 属性の値が "en" で始まる、すなわち "en", "en-US", "en-scouse" のような値を持つ a 要素を表す。

a[hreflang|="en"]

次のセレクタはそれぞれ character 属性に特定の値を持つ DIALOGUE 要素を表す。

DIALOGUE[character=romeo]  DIALOGUE[character=juliet]

6.3.2. 部分マッチ属性セレクタ

セレクタ Level 3 では、属性値の一部にマッチする次の属性セレクタが追加された。

[att^=val]

att 属性の値が "val" から始まる要素を表す。"val" が空文字列である場合、そのセレクタは何も表さない。

[att$=val]

att 属性の値が "val" で終わる要素を表す。"val" が空文字列である場合、そのセレクタは何も表さない。

[att*=val]

att 属性の値に少なくともひとつ "val" という文字列のある要素を表す。"val" が空文字列である場合、そのセレクタは何も表さない。

属性値は CSS の 識別子 もしくは 文字列 でなければならない [CSS21]。属性セレクタにおける属性名や属性値の大文字と小文字の区別については、文書言語に依存する。

例:

次のセレクタは画像を参照する HTML の object 要素を表す。

object[type^="image/"]

次のセレクタは href 属性の値が ".html" で終わる HTML の a 要素を表す。

a[href$=".html"]

次のセレクタは title 属性の中に "hello" という文字列を持つ HTML の p 要素を表す。

p[title*="hello"]

6.3.3. 属性セレクタと名前空間

属性セレクタ中の属性名は CSS 修飾名 として現れる。名前空間が事前に宣言された場合、属性名の前に接頭辞を名前空間区切り子 "vertical bar" (U+007C, |) で区切り示すことができる。Namespaces in XML 勧告と仕様を合わせる目的で、規定の名前空間は属性には適用されない。つまり、名前空間コンポーネントを持たない属性セレクタは、名前空間に属さない属性のみに適用される。(これは "|attr" と等価になる。またこれらの属性は "per-element-type namespace partition" にあると言われる。) セレクタが名前空間を問わずすべての属性にマッチすることを意味したい場合、アスタリスクを名前空間接頭辞として利用できる。

属性セレクタ中の属性名が名前空間接頭辞を持ちながら、その接頭辞に対し名前空間が 宣言 されていない場合、そのセレクタはinvalid となる。

CSS における例:

@namespace foo "http://www.example.com";  [foo|att=val] { color: blue }  [*|att] { color: yellow }  [|att] { color: green }  [att] { color: green }

1番目の規則は "http://www.example.com" 名前空間に属し、値が "val" である att 属性を持つ要素のみにマッチする。

2番目の規則は名前空間を問わず (名前空間に属さないものも含む) すべての att 属性を持つ要素のみにマッチする。

3番目と4番目の規則は等価であり、名前空間に属さない att 属性を持つ要素のみにマッチする。

6.3.4. DTD における属性の規定値

属性セレクタは文書ツリー中の属性値を表す。文書ツリーがどのように構築されるかはセレクタ仕様の範囲外である。いくつかの文書フォーマットは DTD もしくはその他の手法で属性の規定値を定義できるが、属性セレクタによってこれらを選択できるのは、規定値が文書ツリーに現れたときのみになる。このため、文書ツリーに規定値があろうとなかろうと動作するようにセレクタは設計されるべきだ。

たとえば、XML UA は必須ではないが DTD の "外部サブセット" を読むことができる。しかし文書の "内部サブセット" 内にある属性の規定値を探すには DTD が必要である。(サブセットの定義については [XML10] などを参照されたい。) DTD の外部サブセットによって定義された属性の規定値は、UA によって文書ツリーに現れたり現れなかったりするだろう。

XML 名前空間を理解する UA は必須ではないが、名前空間を利用し、属性の規定値が文書ツリー内にさも現れているように扱うことができる。(たとえば、XHTML UA は XHTML DTD の定義を利用しなくてもよい。詳しくは Namespaces in XML 1.0 などを参照されたい。[XML-NAMES])。

Note: 一般的に、実装は外部サブセットを無視している。これは XML 仕様において妥当性検証を行わないプロセッサの挙動に一致している。

例:

radix 属性の規定値に "decimal" を持つ要素 EXAMPLE を考えてみる。DTD は次のようになるだろう。

<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">

ここで、スタイルシートが次の規則を持つとする。

EXAMPLE[radix=decimal] { /*... 既定のプロパティスタイル ...*/ }  EXAMPLE[radix=octal]   { /*... その他のスタイル ...*/ }

1番目の規則は radix 属性がデフォルトで設定されている要素、つまり属性が明示的に指定されていないものにマッチしない可能性がある。すべての可能性に対処するため、規定値に対する指定を持った属性セレクタは省かなければならない。

EXAMPLE                { /*... 既定のプロパティスタイル ...*/ }  EXAMPLE[radix=octal]   { /*... その他のスタイル ...*/ }

EXAMPLE[radix=octal] は型セレクタのみよりも詳細であるため、radix 属性が "octal" という値を持つ要素においては、2番目の規則にあるスタイル宣言が1番目のスタイル宣言を上書きすることになる。規定の状況にだけ適用される全てのプロパティ宣言は、それ以外の状況に対して適用されるスタイル規則に上書きされることに注意されたい。

6.4. クラスセレクタ

HTML の class 属性を表す際、製作者は "ドット" 記法 (もしくは "ピリオド", U+002E, .) を ~= の代わりに利用することができる。つまり、HTML において div.value と div[class~=value] は同じ意味を持つ。属性値はピリオド (.) の直後に記述されなければならない。

その名前空間においてどの属性が "class" 属性なのかを決定する、名前空間固有の処理を UA が有する場合、UA は "ドット" 記法をその XML 文書にも適用できる。この名前空間固有の処理はたとえば仕様の文章中で定義されている。 (例: SVG 1.0 [SVG11]は SVG の class 属性 を定義し、また UA がどのように解釈すべきかを説明している。MathML 1.01 [MATHML] も同様に MathML の class 属性 を定義している。)

CSS における例:

class~="pastoral" であるすべての要素に対しスタイルを適用するには、次のように書く。

*.pastoral { color: green }  /* class~=pastoral であるすべての要素 */

もしくは、次のように書くこともできる。

.pastoral { color: green }  /* class~=pastoral であるすべての要素 */

次の例は、class~="pastoral" である H1 要素のみにスタイルを適用する。

H1.pastoral { color: green }  /* class~=pastoral である H1 要素 */

これらの規則が与えられた場合、次の1番目の H1 は緑色にならないが、2番目の H1 は緑色になる。

<H1>Not green</H1>  <H1 class="pastoral">Very green</H1>

次の規則は P 要素のうち、class 属性の値に pastoral と marine を含むものにマッチする。なお、class 属性は 空白 で区切られた値を持てるように定義されている。

p.pastoral.marine { color: green }

上記の規則は class="pastoral blue aqua marine" にマッチするが、class="pastoral blue" にはマッチしない。

Note: CSS は "class" 属性に対しかなりの力を与えているため、製作者は (HTML の DIV や SPAN など) 特定の表現をほとんど持たない要素に "class" 属性でスタイル情報を与えて自分の "文書言語" を設計できうる。しかし、製作者はこれを避けるべきである。これは、文書言語の構造化要素はその意図や意味を理解され、また受け入れられているが、製作者が定義した独自の class 定義はそうでないことにある。

Note: 要素が複数の class 属性を持つ場合、それぞれの値はクラスを検索する前に空白で結合されていなければならない。しかしながら現時点で CSS Working Group はそうした事態が想定される状況を認識していないため、この挙動は非規範的である。

6.5. ID セレクタ

文書言語は ID 型と宣言された属性を持つことがある。ID 型の属性が特別なのは、適合する文書において、属性が与えられた要素型を問わず、同じ値を持つ属性がふたつと存在しないことにある。文書言語がなんであれ、ID 型の属性は要素を一意に特定する際に利用できる。HTML 言語において ID 型属性はすべて "id" という名前を持っている。XML 言語では ID 型属性は異なる名前を持つかもしれないが、ID 型属性の性質は他と変わらない。

文書言語の ID 型属性によって、製作者は文書内の要素に識別子を与えられる。ID セレクタは "ハッシュ" (U+0023, #) の直後に ID 型属性の値を与え表記する。値は CSS 識別子 でなければならない。ID セレクタはセレクタ中の識別子にマッチする識別子を持つ要素を表す。

セレクタ仕様は UA がどうやって要素中の ID 型属性を知るかを定義しない。UA は文書の DTD を読む、ID 型属性の情報を UA に組み込む、ユーザーに尋ねることなどが考えられる。

例:

次の ID セレクタは ID 型属性の値に "chapter1" を持つ h1 要素を表す。

h1#chapter1

次の ID セレクタは ID 型属性の値に "chapter1" を持つ要素を表す。要素型は問わない。

#chapter1

次のセレクタは ID 型属性の値に "z98y" を持つ要素を表す。要素型は問わない。

*#z98y

Note: XML 1.0 [XML10] において、どの属性が要素の ID であるかを記す情報は DTD もしくはスキーマ言語にあるとされている。UA は XML をパースする際常に DTD を読んでいるわけではないので、要素の ID が何であるかを知らない可能性もある (しかし UA が名前空間固有の処理を有し、その名前空間においてどの属性が ID 属性なのかを知っていることもあるだろう)。その UA が要素の ID を知らないと、スタイルシートの製作者が知っている、もしくは推測できる場合、ID セレクタではなく属性セレクタを用いるべきだ。つまり、#p371 ではなく [name=p371] と書くことになる。

要素が複数の ID 属性を持つ場合、すべての値をその要素の ID として扱い、ID セレクタの処理対象としなければならない。これは xml:id, DOM3 Core, XML DTD, 名前空間固有の処理が組み合わさる際に生じる可能性がある。

6.6. 擬似クラス

擬似クラスは、文書ツリーの範囲外にある情報や、単体セレクタでは表現できないものを選択できるように導入された概念だ。

擬似クラスは "コロン" (U+003A, :) の直後に擬似クラス名を書いたものとして表される。擬似クラスには括弧で囲まれた値をとるものもあり、括弧は擬似クラス名の直後に記述する。

擬似クラスはセレクタにあるすべての単体セレクターシーケンスで利用でき、単体セレクターシーケンス中では、最初の型セレクタもしくは全称セレクタ (省略可能) の後に記述できる。擬似クラス名は case-insensitive であり、大文字と小文字を区別しない。いくつかの擬似クラスは相互排他的であるが、そうでないものは同じ要素に対し重ねて適用できる。動的な擬似クラスもあり、ユーザーと文書のインタラクションに応じて擬似クラスが得られるもしくは失われることがある。

6.6.1. 動的擬似クラス

動的擬似クラスは要素の名前、属性、内容以外という、一般に文書ツリーから導けない性質から要素を分類するものだ。

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

6.6.1.1. リンク擬似クラス ― :link, :visited

UA は未訪問のリンクを訪問済みのリンクと区別し表示するものだ。セレクタ仕様はそれらを区別するための擬似クラス :link と:visited を定義する。

• :link 擬似クラスは未訪問のリンクに適用される。
• :visited 擬似クラスはユーザーがリンクを訪問した際に適用される。

一定期間を過ぎたら、UA は訪問済のリンクを (未訪問の) ':link' 状態に戻してもよい。

これら2つの状態は相互排他的である。

例:

次のセレクタはクラス external に属し、かつ訪問済のリンクを表す。

a.external:visited

Note: スタイルシート製作者は :link, :visited 擬似クラスを悪用し、ユーザーがどのサイトにアクセスしたかをそのユーザーの承諾なしに知ることができる。

このため、UA はすべてのリンクを未訪問として扱う、もしくはそれぞれのリンクを表示する際ユーザーのプライバシーに配慮した方法を実装するなどの方法をとることができる。

訳注: Google Chrome 6, Safari 5, Firefox 4, Internet Explorer 9 以降では色関連のプロパティを除き、訪問済みリンクに指定したプロパティが適用されない。

6.6.1.2. ユーザーアクション擬似クラス ― :hover, :active, :focus

インタラクティブな UA はユーザーの行動に応じて描画を変更する。セレクタ仕様はユーザーの行動によって要素を選択する3つの擬似クラスを提供する。

• :hover 擬似クラスは、ユーザーがポインティングデバイスで示した要素に適用される。要素が示された時に適用されるので、実行されることを必要としない。たとえば、視覚的な UA はこの擬似クラスを、カーソル (マウスポインタ) が要素によって生成されるボックスの上にある際に適用することができる。インタラクティブな媒体 をサポートしない UA はこの擬似クラスをサポートする必要はない。インタラクティブな媒体 をサポートする UA のいくつかは、この擬似クラスをサポートしない可能性がある (例: ホバー効果を検出しないペンデバイスなど)
• :active 擬似クラスは、ユーザーによって実行された要素に適用される。この擬似クラスはたとえば、ユーザーがマウスボタンを押して、それが戻るまでの時間に適用されるだろう。マウスボタンが1つ以上あるシステムにおいて、:active は第一ボタンもしくは主要な実行ボタン (多くの場合 "左" マウスボタンになる)、もしくはそのエイリアスのみに適用される。
• :focus 擬似クラスは、フォーカスを持つ要素に適用される。フォーカスを持つとは、キーボードもしくはマウスイベント、あるいはその他の入力を許可する状態を表す。

文書言語や実装の制限により、:active になる要素とならない要素、:focus が与えられる要素と与えられない要素が存在する可能性がある。

これらの擬似クラスは相互排他的ではない。要素は複数の擬似クラスを持つセレクタにマッチすることがある。

セレクタ仕様は ":active" もしくは ":hover" である要素の親も同様の状態にあるかを定義しない。

Note: その要素の子がポインティングデバイスにより記されたことから要素自身も ":hover" 状態になる場合、":hover" がポインティングデバイスの下にない要素に適用されることも考えられる。

例:

a:link    /* 未訪問のリンク */  a:visited /* 訪問済みのリンク */  a:hover   /* ホバーした時 */  a:active  /* リンクの実行時 */

擬似クラスを組み合わせた例を次に記す。

a:focus  a:focus:hover

このとき、2番目のセレクタは :focus と :hover 状態にある a 要素にマッチする。

Note: 要素が ':visited' かつ ':active' (もしくは ':link' かつ ':active') という状態になることがある。

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

いくつかの URI はリソース内の箇所を参照する。こういった URI の終わりには "ハッシュ" (U+0023, #) と、その直後に識別子が書かれている (識別子はフラグメント識別子と呼ばれる)。

フラグメント識別子つき URI は文書中の特定の要素にリンクすることがあり、これはターゲット要素と呼ばれる。次は HTML 文書内にある section_2 と名付けられた要素を参照する URI だ。

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

ターゲット要素は :target 擬似クラスで表すことができる。文書の URI がフラグメント識別子を持たない場合、その文書にはターゲット要素が存在しない。

例:

p.note:target

このセレクタは note というクラスを持つ p 要素がターゲット要素として URI から参照されている状態を表す。

CSS における例:

ここでは、:target 擬似クラスによって、ターゲット要素の文字色が赤に、そして要素内容の前に画像が挿入される。

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

6.6.3. 言語情報擬似クラス ― :lang

文書言語が、要素がどの人言語で書かれているかを決定する手段を定義する場合、その言語情報から要素を選択することが可能となる。たとえば HTML [HTML401] では lang 属性や meta 要素、プロトコル (HTTP ヘッダなど) を始めいくつかの方法で文書の言語情報を取得できる。XML においては xml:lang という属性があり、また言語情報を判別する言語固有の仕組みが用意されている可能性もある。

擬似クラス :lang(C) は言語 C で記述された要素を表す。要素がセレクタによって表されているかは、要素の言語値 (必要に応じ BCP 47 構文によって正規化される) が識別子 C に等しい、もしくは識別子 C から始まり、直後に "-" (U+002D) があるかを基としている。要素の言語値と識別子 C とのマッチングは ASCII 範囲内で case-insensitive であり、大文字と小文字を区別せず行われる。識別子 C は valid な言語名である必要はない。

C は valid な CSS 識別子 [CSS21] でなければならず、また空であってはならない。(条件を満たさない場合、セレクタは invalid となる。)

Note: 文書やプロトコルが言語情報を記すとき、値は BCP 47 [BCP47] (もしくはその改訂版) の言語コードを利用することが推奨される。また、XML ベースの文書で "xml:lang" 属性を使う場合、その値には BCP 47 の言語コードを使うことになる[XML10]。詳しくは "FAQ: Two-letter or three-letter language codes." を参照されたい。

例:

次の2つのセレクタはベルギーで話されるフランス語と、ドイツ語で書かれた要素を表す。その次の2つのセレクタはベルギーで話されるフランス語と、ドイツ語で書かれた q による引用文を表す。

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

:lang(C) と "|=" の違いは、"|=" が要素に与えられた属性のみを対象とするのに対し、:lang(C) は UA が文書のセマンティクスに対し持つ情報を処理対象とすることにある。

次の HTML の例において、[lang|=fr] は BODY のみにマッチする。これは BODY が LANG 属性を持つからである。一方、:lang(fr) は BODY および P にマッチする。これはどちらの要素もフランス語で書かれているからである。[lang|=fr] は P にマッチしない。これは要素に LANG 属性が指定されていないからである。

<body lang=fr>    <p>Je suis français.</p>  </body>

6.6.4. UI 要素状態擬似クラス

6.6.4.1. :enabled, :disabled 擬似クラス

:enabled 擬似クラスは有効状態にある UI 要素を表す。このような要素は無効状態も持つ。

:disabled 擬似クラスは無効状態にある UI 要素を表す。このような要素は有効状態も持つ。

何が有効で何が無効かを構成するのは言語依存である。一般的な文書において、ほとんどの要素は :enabled でも :disabled でもない。

Note: UI 要素とユーザーのインタラクションに影響しうる CSS プロパティが、:enabled や :disabled へのマッチに影響することはない。たとえば、display プロパティや visibility プロパティは、要素の有効/無効状態に何の影響も及ぼさない。

6.6.4.2. :checked 擬似クラス

ラジオボタンやチェックボックス要素はユーザーによって切り替えられる。いくつかのメニューアイテムはユーザーが選択した際に "チェック" 状態になる。こうした "チェック" 状態にある要素には :checked 擬似クラスが適用される。:checked 擬似クラスは動的な性質を持ち、また文書の意味的属性の存在によって適用されることもあるためユーザーの行動により変更されうるが、すべての媒体に適用される。たとえば、 :checked 擬似クラスは、HTML4 仕様の Section 17.2.1 にある通り selected や checked 属性を持つ要素にまず適用されるが、これらは当然 "オフ" にできるものであり、その結果適用されていた :checked 擬似クラスは適用されなくなる。

6.6.4.3. :indeterminate 擬似クラス

Note: ラジオボタンやチェックボックスはユーザーによって切り替えられるが、チェックされてもチェックされていないわけでもない不確定状態となることもある。これは、要素の属性や DOM 操作によって引き起こされることがある。

将来のセレクタ仕様がそのような要素に適用される :indeterminate 擬似クラスを導入する可能性もあるだろう。

2011年3月現在、:indeterminate 擬似クラスは上位レベルのセレクタ仕様や他の CSS モジュールではなく HTML5仕様で定義 されている。また、一部のブラウザで実装が行われている。

6.6.5. 構造擬似クラス

セレクタ仕様は文書ツリー内の情報のうち、他の単体セレクタや結合子では表現できない選択を可能にする 構造擬似クラス も定義する。

テキストやその他の非要素ノードは、ツリー構造における要素の位置を計算する際に加味されることはない。要素の位置を計算する際、そのインデックスは 1 より始まる。

6.6.5.1. :root 擬似クラス

:root 擬似クラスは文書のルート要素を表す。HTML4 において、ルート要素は常に HTML 要素となる。

6.6.5.2. :nth-child() 擬似クラス

:nth-child(an+b) 擬似クラスは、文書ツリーにおいて、ある要素の子で、その前に an+b-1 個 (n は正の整数もしくは0) の兄弟を持つ状態を表す。a と b が正の数である場合、擬似クラスは要素の子を a 個ずつのグループに分け (最後のグループは余りを持つ)、それぞれのグループから b 番目の要素を選択する。この擬似クラスによりたとえば、表において行ごとを選択することや、4つの段落をひとつのグループとし、グループ内の段落それぞれに異なる色を与えることなどができる。a と b の値は整数 (正、負、もしくは0) でなければならない。最初の子要素のインデックスは1となる。

これに加えて、:nth-child() は 'odd' や 'even' という引数を取ることもできる。'odd' は 2n+1 と同じ意味を持ち、また 'even' は 2nと同じ意味を持つ。

:nth-child() の引数は、次の文法を満たす必要がある。INTEGER は [0-9]+ にマッチし、その他のトークンは section 10.2 の Lexical scanner で定義されている。

nth    : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |           ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*    ;

例:

tr:nth-child(2n+1) /* HTML において table の奇数行を表す */  tr:nth-child(odd)  /* 上と同じ */  tr:nth-child(2n+0) /* HTML において table の偶数行を表す */  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; }

b の値の前に負の記号がある場合、式内の "+" は省かれなければならない (b の負の値を表す "-" によって結果的に置き換えられることになるからだ)。

例:

:nth-child(10n-1)  /* 9番目、19番目、29番目の要素を表す */  :nth-child(10n+9)  /* 上と同じ */  :nth-child(10n+-1) /* 構文的に invalid であり、結果として無視される */

a=0 のとき、an を含める必要はない (ただし、b がすでに省略された場合を除く)。an が引数に含まれておらず、かつ b が負の数でない場合、b の前にある "+" 記号は省略可能である。この場合、構文は :nth-child(b) と短縮されることになる。

例:

foo:nth-child(0n+5)   /* ある親要素の5番目の子が foo 要素である状態を表す */  foo:nth-child(5)      /* 上と同じ */

a=1 もしくは a=-1 のとき、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 番目の要素すべてが選択される。この場合 +b (もしくは -b) を省くことができる。ただし、a がすでに省かれていない場合を除く。

例:

tr:nth-child(2n+0) /* HTML において table の偶数行を表す */  tr:nth-child(2n) /* 上と同じ */

空白は "(" の後、")" の前、an と b の部分を分ける "+" もしくは "-" の前後に入力することができる。

valid な空白を持つ例:

:nth-child( 3n + 1 )  :nth-child( +3n - 2 )  :nth-child( -n+ 6)  :nth-child( +6 )  

invalid な空白を持つ例:

:nth-child(3 n)  :nth-child(+ 2n)  :nth-child(+ 2)  

a と b が 0 である場合、この擬似クラスは文書ツリー中なんの要素も表さない。

a は負の値をとることができるが、n≥0 において an+b が正となる値の場合にのみ文書ツリーの要素を表すことができる。

例:

html|tr:nth-child(-n+6)  /* XHTML において table の先頭から6行目までを表す */

6.6.5.3. :nth-last-child() 擬似クラス

:nth-last-child(an+b) 擬似クラスは、文書ツリーにおいて、ある要素の子で、その後に an+b-1 個 (n は正の整数もしくは0) の兄弟を持つ状態を表す。引数については :nth-child() を参照されたい。:nth-child() と同じく、引数に 'even' や 'odd' をとることができる。

例:

tr:nth-last-child(-n+2)    /* HTML において table の最後から2行までを表す */    foo:nth-last-child(odd)    /* ある親要素の子のうち、下から数えて奇数個目の要素を表す */

6.6.5.4. :nth-of-type() 擬似クラス

:nth-of-type(an+b) 擬似クラスは、文書ツリーにおいて、ある要素の子で、その要素と同じ要素名 (展開後) を持つ要素がその前にan+b-1 個 (n は正の整数もしくは0) ある状態を表す。引数については :nth-child() を参照されたい。:nth-child() と同じく、引数に 'even' や 'odd' をとることができる。

CSS における例:

次の規則によって、製作者は画像を交互にフロートさせられる。

img:nth-of-type(2n+1) { float: right; }  img:nth-of-type(2n) { float: left; }

6.6.5.5. :nth-last-of-type() 擬似クラス

:nth-last-of-type(an+b) 擬似クラスは、文書ツリーにおいて、ある要素の子で、その要素と同じ要素名 (展開後) を持つ要素がその後に an+b-1 個 (n は正の整数もしくは0) ある状態を表す。引数については :nth-child() を参照されたい。: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)

6.6.5.6. :first-child 擬似クラス

:nth-child(1) に等しい。:first-child 擬似クラスはその要素がある要素の最初の子要素である状態を表す。

例:

次のセレクタは div 要素の最初の子である p 要素を表す。

div > p:first-child

このセレクタは次のコードにおいて、div 内の p を表せる。

<p> 注釈前の最後の P 要素 </p>  <div class="note">     <p> 注釈中の最初の P 要素 </p>  </div>

しかし、先程のセレクタは次のコードにある、2つ目の p を表すことはできない。

<p> 注釈前の最後の P 要素 </p>  <div class="note">     <h2> Note </h2>     <p> 注釈中の最初の P 要素 </p>  </div>

次の2つのセレクタはほとんどの場合において等価である。

* > a:first-child /* いかなる要素の最初の子である a */  a:first-child /* 上記と等価 (a がルート要素でないことを想定) */

6.6.5.7. :last-child 擬似クラス

:nth-last-child(1) に等しい。:last-child 擬似クラスはその要素がある要素の最後の子要素である状態を表す。

例:

次のセレクタは、序列リスト ol の最後の子である li を表す。

ol > li:last-child

6.6.5.8. :first-of-type 擬似クラス

:nth-of-type(1) に等しい。:first-of-type 擬似クラスはある親要素の子で同じ名前をもつ要素のうち、最初の要素を表す。

例:

次のセレクタは dt 要素のうち、親である定義リスト dl から見て最初のものを表す。

dl dt:first-of-type

このセレクタは次の例において、最初から数えて2つの dt 要素を表すが、3番目の要素を表すことはない。

<dl>   <dt>gigogne</dt>   <dd>    <dl>     <dt>fusée</dt>     <dd>multistage rocket</dd>     <dt>table</dt>     <dd>nest of tables</dd>    </dl>   </dd>  </dl>

6.6.5.9. :last-of-type 擬似クラス

:nth-last-of-type(1) に等しい。:last-of-type 擬似クラスはある親要素の子で同じ名前をもつ要素のうち、最後の要素を表す。

例:

次のセレクタは表の行 tr 中の最後のセル td を表す。

tr > td:last-of-type

6.6.5.10. :only-child 擬似クラス

ある要素の親が、自身以外の子を持たない状態を表す。:first-child:last-child や :nth-child(1):nth-last-child(1) に等しいが、:only-child の詳細度はこれらに比べて低い。

6.6.5.11. :only-of-type 擬似クラス

ある要素の親が、自身以外に同じ要素名 (展開後) の子を持たない状態を表す。:first-of-type:last-of-type や :nth-of-type(1):nth-last-of-type(1) に等しいが、:only-of-type の詳細度はこれらに比べて低い。

6.6.5.12. :empty 擬似クラス

:empty 擬似クラスは子を持たない要素を表す。文書ツリーの観点で考えると、要素ノードと内容ノード (DOM [DOM-LEVEL-3-CORE] のテキストノード、CDATA ノード、実体参照) が 0 でない長さの情報を持つ場合、それらは要素が空であるかないかに影響するものとして扱われなければならない。コメント、処理命令、その他のノードは要素の空であるかないかを表す状態に影響してはならない。

例:

p:empty は次のコードに対して valid である。

<p></p>

foo:empty は次のコードどれに対しても valid ではない。

<foo>bar</foo>

<foo><bar>bla</bar></foo>

<foo>this is not <bar>:empty</bar></foo>

6.6.6. (空)

このセクションは意図的に空となっている。(このセクションにはかつて :contains() 擬似クラスが定義されていた。)

6.6.7. 否定擬似クラス ― :not

否定擬似クラス :not(X) は関数表記をとり、単体セレクタ を引数にとる (ただし、引数内に否定擬似クラスを持つことはできない)。否定擬似クラスは引数内の要素で表されない要素を表す。

否定擬似クラスを入れ子にすることはできない。すなわち、:not(:not(...)) は invalid となる。また擬似要素は単体セレクタではないため、:not() の valid な引数ではない。

例:

次のセレクタは HTML 文書中の button 要素のうち、無効ではないものすべてにマッチする。

button:not([DISABLED])

次のセレクタは FOO 要素ではない要素すべてを表す。

*:not(FOO)

次のセレクタは、リンクではない HTML 要素すべてを表す。

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

規定の名前空間宣言は、否定擬似クラスの引数に影響しない。ただし、引数が全称セレクタもしくは型セレクタである場合を除く。

例:

規定の名前空間が "http://example.com/" として、次のセレクタはその名前空間に属さない要素すべてを表す。

*|*:not(*)

次のセレクタは名前空間を問わず、ホバー状態にない要素すべてにマッチする。これは規定の名前空間に属し、かつホバー状態にない要素のみに限定されない。さらに、規定の名前空間に属さない要素がホバー状態にあるとき、その要素はマッチしない。

*|*:not(:hover)

Note: :not() 擬似クラスを使って、意味のないセレクタを書くこともできる。たとえば、:not(*|*) はどの要素も表すことはない。ほかにも、foo:not(bar) というセレクタも書くことができる。これは foo に等しいが、foo よりも高い詳細度にある。

7. 擬似要素

擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成する。たとえば、文書言語は要素内容において、最初の文字や最初の行にアクセスする手段を提供しない。擬似要素によって、これら本来はアクセスすることのできない情報を扱えるようになる。擬似要素は元文書に存在しない内容を参照する方法も提供する (例: ::before, ::after 擬似要素は generated content へのアクセスを提供する)。

擬似要素は擬似要素名の前に2つのコロン (::) を記述し表される。

:: 記法は擬似クラスと擬似要素の区別をつけるために、セレクタ Level 3より導入された。現在のスタイルシートとの互換性のため、UA は CSS1, CSS2 で導入された、コロン1つの記法で表される擬似要素 (:first-line, :first-letter, :before, :after) も受け付けなければならない。この互換性対策は、Level 3で導入される新しい擬似クラスには適用されない。

擬似要素はセレクタにつき1つのみ許される。セレクタに擬似要素がある場合、それはセレクタの 対象 を表す単体セレクタシーケンスの後に現れなければならない。Note: 将来のセレクタ仕様において、セレクタにつき複数の擬似要素が利用できるようになる可能性もある。

7.1. ::first-line 擬似要素

::first-line 擬似要素は要素の整形済み内容のうち1行目を表す。

CSS における例:

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

上記の規則は "すべての p において、1行目を大文字で表記せよ" という意味になる。

セレクタ p::first-line は実在する文書要素にはマッチしない。このセレクタは、適合 UA がすべての p 要素の始まりに挿入する擬似要素にマッチする。

1行目の長さは、ページ幅、フォントサイズなど数多くの要因に依存する。次のような HTML の段落を考えてみよう。

<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>  

この段落が次のように行が分けられ表示されたとしよう。

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.  

この段落は UA によって、::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 long HTML  paragraph that will be broken into several  lines.</SPAN> The first line will be identified  by a fictional tag sequence. The other lines   will be treated as ordinary lines in the   paragraph.</P>  

UA は ::first-line による架空タグ列を挿入する際、span の開始タグと終了タグをこういった風に挿入することが考えられる。

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

7.1.1. CSS における最初の整形済行の定義

CSS において、::first-line 擬似要素はブロックボックスや 'inline-block', 'table-caption', 'table-cell' などブロックライクなコンテナにだけ機能する。

要素の最初の整形済行は、同じフロー中の子孫ブロック ('position' や 'float' により通常フローから外れたブロックではないもの) に存在するかもしれない。たとえば、<DIV><P>This line...</P></DIV> というマークアップの DIV の最初の行は、P の最初の行となる (P と DIV どちらもがブロックであるとする)。

'table-cell', 'inline-block' 中の最初の行は、祖先要素の最初の整形済行になることはない。つまり、<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> というマークアップの DIV の整形済み行は "Hello" ではない。

Note: <p><br>First... というマークアップにおいて、p の最初の行には文字が含まれない (br は HTML4 の規定スタイルが適用されているものとする)。そして、"First" という単語は最初の整形済行には含まれない。

UA は ::first-line 擬似要素について、架空の開始タグが、それを囲む要素のうち一番内側にあるブロック要素中にネストされているものとして挙動すべきである。(ただし CSS1 と CSS2 はこの状況について何も語っていないため、製作者はこの挙動に依存すべきでない。) たとえば、次のようなマークアップがあったとする。

<DIV>    <P>First paragraph</P>    <P>Second paragraph</P>  </DIV>  

このとき、架空タグ列は次のようになる。

<DIV>    <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>    <P><P::first-line>Second paragraph</P::first-line></P>  </DIV>  

::first-line 擬似要素はインライン要素に似ているが、いくつかの制限がある。適用できる CSS プロパティは font 関連プロパティ、color 関連プロパティ、background 関連プロパティ、'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform', 'line-height' となる。UA は他のプロパティを適用することもできる。

CSS の継承において、子要素の一部が最初の行にあるとき、それは ::first-line 擬似要素に適用できるプロパティのみを::first-line 擬似要素から継承する。その他のプロパティについては、 ::first-line の親のうち擬似要素でないものが継承される。最初の行にない小要素の一部は常にその親から継承する。

7.2. ::first-letter 擬似要素

::first-letter 擬似要素は、要素の行頭文字を表す。当該行において要素の前に画像やインラインテーブルなど他の内容がある場合はマッチしない。::first-letter 擬似要素は "イニシャルキャップ" や "ドロップキャップ" といった、よく使われるタイポグラフィの効果を得るために利用できる。

Unicode で "open" (Ps), "close" (Pe), "initial" (Pi), "final" (Pf), "other" (Po) クラスに分類される約物が行頭文字もしくは行頭文字の直後に現れる場合、それらも ::first-letter に含まれるべきである。[UNICODE]

::first-letter は行頭文字が数字である場合、たとえば "67 million dollars is a lot of money." という文の "6" にも適用される。

Note: いくつかのケースにおいて、::first-letter 擬似要素は行中の約物でない文字も含むべきである。たとえば、結合文字はそれらの基本文字と共に保持されるべきである。また、いくつかの言語ではある文字のつながりの処理に特定のルールを設けているかもしれない。UA における ::first-letter の定義は、少なくとも UAX29 で定義される規定の書記素クラスタを含むべきであり、可能であればそれより多くともよい。たとえば、オランダ語において "ij" という文字のつながりが現れた際は、そのどちらもが ::first-letter 擬似要素として認識されるべきだ。[UAX29]

::first-letter 擬似要素を構成する文字が同じ要素に存在しない場合、たとえば <p>'<em>T... というマークアップによって行頭文字が "'T" となるような場合、UA は片方の要素に擬似要素を生成する、両方の要素に擬似要素を生成する、擬似要素を生成しないといった手法をとることができる。

同様に、ブロック中の行頭文字が先頭行にない場合 (双方向テキストの再構成などにより)、UA は擬似要素を生成する必要はない。

例:

次の CSS と HTML の例 はどのように互い違う擬似要素が関係しあうかを説明する。各 P 要素の先頭文字は 'green' になり、フォントサイズが '24pt' となる。整形済行のうち先頭行は 'blue' となり、残りの行は 'red' となる。

p { color: red; font-size: 12pt }  p::first-letter { color: green; font-size: 200% }  p::first-line { color: blue }    <P>Some text that ends up on two lines</P>

"ends" の前に行送りがあると仮定すると、このマークアップにおける架空タグ列は次のようになるだろう。

<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 要素に設定された場合、そのプロパティは上書きされる。

先頭文字は 最初の整形済行 内で発生しなければならない。たとえば、HTML マークアップ <p><br>First... において、先頭行はなんの文字も含んでいない。このことから、::first-letter は何も含まない (br は HTML4 の規定スタイルが適用されているものとする)。なので、"First" という単語の "F" にマッチすることはない。

7.2.1. CSS での適用

CSS において、::first-letter 擬似要素は'block', 'list-item', 'table-cell', 'table-caption', 'inline-block' 要素などブロックライクなコンテナに適用さえる。Note: 将来のセレクタ仕様において、他の 'display' タイプにも ::first-letter 擬似要素を指定可能となるかもしれない。

::first-letter 擬似クラスはテキストを含む要素、もしくは同じフローに属する子孫がテキストを持つ場合に利用できる。UA は仮想的な ::first-letter 開始タグが先頭文字の直前にあるかのように振舞うべきである。これは、そのようなテキストが子孫に属する場合であっても同様だ。

例:

次のようなマークアップがあるとする。

<div>  <p>The first text.

この架空タグ列は次のようになる。

<div>  <p><div::first-letter><p::first-letter>T</...></...>he first text.

CSS において 'table-cell' や 'inline-block' の先頭文字は、祖先の先頭文字となることがない。つまり、<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> というマークアップにおいて DIV の先頭文字が "H" となることはない。この場合DIV は先頭文字を持たない。

要素がリスト項目 ('display: list-item') である場合、::first-letter は親ボックスの、マーカーの次にくる先頭文字に適用される。UA は 'list-style-position: inside' であるリスト項目に指定された ::first-letter を無視しても構わない。要素に ::before もしくは ::after で内容が与えられた場合、::first-letter はそれらの内容を含めた上で適用される。

例:

p::before {content: "Note: "} という規則が与えられた場合、セレクタ p::first-letter は "Note" の "N" にマッチする。

CSS において ::first-letter 擬似要素は 'float' が 'none' である場合、インラインレベル要素と似た働きをする。::first-letter擬似要素に適用されるプロパティには font 関連プロパティ、'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' ('float' が 'none' の場合のみ), margin 関連プロパティ、padding 関連プロパティ、border 関連プロパティ、color 関連プロパティ、background 関連プロパティがある。UA は他のプロパティを適用することもできる。タイポグラフィ的に正確なドロップキャップやイニシャルキャップを描画できるように、UA は行間、字幅、字の高さを字形に沿ったものに変更できる。これは通常の要素には当てはまらない。

例:

この CSS と HTML は、イニシャルキャップの表示例をつくっている。ここで、::first-letter 擬似要素から継承された 'line-height' の値は 1.1 だが、この例では UA が先頭文字の高さを異なるように計算し、1行目と2行目の間に不必要な空白が生まれないように調整していることに注意されたい。また、先頭文字における架空の開始タグは span 内にあるため、span に指定された 'font-weight' が bold ではなく normal であることにも注意されたい。

p { line-height: 1.1 }  p::first-letter { font-size: 3em; font-weight: normal }  span { font-weight: bold }  ...  <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>  Erbarremt over my en mijn benaeuwde vesten<br>  En arme burgery, en op mijn volcx gebed<br>  En dagelix geschrey de bange stad ontzet.  

次の CSS は先頭2行にまたがるドロップキャップを実現する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  <HTML>   <HEAD>    <TITLE>Drop cap initial letter</TITLE>    <STYLE type="text/css">     P               { font-size: 12pt; line-height: 1.2 }     P::first-letter { font-size: 200%; 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>  

この例は次のように表示されるだろう。

マークアップにおける架空タグ列は次のようになる。

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

::first-line 擬似要素の開始タグがブロック要素の開始タグ直後に挿入される一方で、::first-letter 擬似要素タグは内容 (先頭文字) に隣接することに注意されたい。

伝統的なドロップキャップ効果を実現するため、UA はフォントサイズの概算を行いベースラインを揃えるといったことができる。また、整形の際にグリフのアウトラインを加味することもできる。

7.3. (空)

このセクションは意図的に空となっている。(このセクションにはかつて ::selection 擬似要素が定義されていた。)

7.4. ::before, ::after 擬似要素

::before 擬似要素と ::after 擬似要素は、要素内容の前や後にある generated content を表すために使われる。これらの擬似要素は CSS 2.1 で定義されている。[CSS21].

::before もしくは ::after によって生成された内容を持つ要素に ::first-letter 擬似要素と ::first-line 擬似要素が適用された場合、::first-letter と ::first-line はそれらの生成された内奥を含めた文字もしくは行にに適用される。

8. 結合子

8.1.子孫結合子 (子孫セレクタ)

ある要素の子孫要素を表すセレクタが欲しいことがある。たとえば、「H1 要素の中にある EM 要素」といった具合だ。子孫結合子はそのような関係を表す際に利用できる。子孫結合子は 空白文字 によって表され、2つの単体セレクタシーケンスを分割する。"A B" といったかたちをとるセレクタは A 要素の子孫にあたる B 要素を表す。

例:

たとえば、次のようなセレクタを考えてみよう。

h1 em

これは h1 要素の子孫にあたる em 要素を表す。これは valid で正しいセレクタであり、次のようなマークアップの一部を表す。

<h1>This <span class="myclass">headline  is <em>very</em> important</span></h1>

では、次のようなセレクタを考えてみよう。

div * p

これは div 要素の孫や曾孫など、間に何らかの子孫要素をはさむ p要素を表す。"*" の前後にある空白文字が全称セレクタの一部でないことに注意されたい。この空白文字は結合子であり、div が何らかの要素の祖先であり、その何らかの要素もまた、p 要素の祖先であることを示す。

次のセレクタは子孫結合子と属性セレクタを組み合わせ、div 要素内にある p 要素の子孫のうち、href 属性が指定された要素を表している。

div p *[href]

8.2. 子結合子 (子セレクタ、子供セレクタ、直下セレクタ)

子結合子 は2つの要素の親子関係を示す。子結合子は "大なり記号" (U+003E, >) によって表され、2つの単体セレクタシーケンスを分割する。

例:

次のセレクタは body の直下にある p 要素を表す。

body > p

次の例は子孫結合子と子結合子を組み合わせたものだ。

div ol>li p

このセレクタは、div 要素の子孫である ol 要素の子要素 li の子孫である p 要素を表す。">" 結合子の前後に任意で挿入可能な空白が省略されていることに注意されたい。

ある要素の子のうち1番目のものを選択したい場合は、:first-child 擬似クラスのセクションを参照されたい。

8.3. 兄弟結合子 (兄弟セレクタ)

兄弟結合子には隣接兄弟結合子と一般兄弟結合子の2種類がある。どちらの場合においても、要素の隣接関係を調べる際には、非要素ノード (要素間のテキストなど) は無視される。

8.3.1. 隣接兄弟結合子 (隣接兄弟セレクタ、隣接セレクタ)

隣接兄弟結合子は "プラス記号" (U+002B, +) によって表され、2つの単体セレクタシーケンスを分割する。2つのシーケンスによって現れる要素は文書ツリー上で共通の親を持つこと、さらに1番目に登場した要素が2番目に登場する要素の1つ前にあることを表す。

例:

次のセレクタは math 要素の直後に現れる p 要素を表す。

math + p

次のセレクタは今の例と似ているが、属性セレクタが付加されている。h2 要素の直前に現れる h1 要素には class="opener" が与えられていなければならないという制約が課せられている。

h1.opener + h2

8.3.2. 一般兄弟結合子 (一般兄弟セレクタ、間接セレクタ)

一般兄弟結合子は "チルダ" (U+007E, ~) によって表され、2つの単体セレクタシーケンスを分割する。2つのシーケンスによって現れる要素は文書ツリー上で共通の親を持つこと、さらに1番目に登場した要素が2番目に登場する要素の前 (直前でなくともよい) にあることを表す。

例:

h1 ~ pre

このセレクタは h1 に続く pre 要素を表す。これは valid で正しいセレクタであり、次のようなマークアップの一部を表す。

<h1>Definition of the function a</h1>  <p>Function a(x) has to be applied to all figures in the table.</p>  <pre>function a(x) = 12x/13.5</pre>

9. セレクタの詳細度計算

セレクタの詳細度は次のように計算される。

• セレクタ中の ID セレクタの個数を数える (= a)
• セレクタ中のクラスセレクタ、属性セレクタ、擬似クラスの個数を数える (= b)
• セレクタ中の型セレクタと擬似要素の個数を数える (= c)
• 全称セレクタは無視する

:not() 擬似クラス 中のセレクタも他のセレクタと同様に数える。しかし、:not() 擬似クラス自体は擬似クラスとして数えない。

得られた3つの数値を結合したものがセレクタの詳細度となる。なお、ここで得られる数値は大きな底を持つ記数法を採用しており、十進数ではない。

例:

*               /* 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 */  

Note: 同じ単体セレクタの繰り返しも許可され、繰り返すことによって詳細度も上がる。

Note: HTML の style 属性における詳細度は CSS 2.1 で規定されている [CSS21]。

10. The grammar of Selectors

10.1. Grammar

The grammar below defines the syntax of Selectors. It is globally LL(1) and can be locally LL(2) (but note that most UAs should not use it directly, since it doesn't express the parsing conventions). The format of the productions is optimized for human consumption and some shorthand notations beyond Yacc (see [YACC]) are used:

• *: 0 or more
• +: 1 or more
• ?: 0 or 1
• |: separates alternatives
• [ ]: grouping

The productions are:

selectors_group    : selector [ COMMA S* selector ]*    ;    selector    : simple_selector_sequence [ combinator simple_selector_sequence ]*    ;    combinator    /* combinators can be surrounded by whitespace */    : PLUS S* | GREATER S* | TILDE S* | S+    ;    simple_selector_sequence    : [ type_selector | universal ]      [ HASH | class | attrib | pseudo | negation ]*    | [ HASH | class | attrib | pseudo | negation ]+    ;    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    /* '::' starts a pseudo-element, ':' a pseudo-class */    /* Exceptions: :first-line, :first-letter, :before and :after. */    /* Note that pseudo-elements are restricted to one per selector and */    /* occur only in the last simple_selector_sequence. */    : ':' ':'? [ IDENT | functional_pseudo ]    ;    functional_pseudo    : FUNCTION S* expression ')'    ;    expression    /* In CSS3, the expressions are identifiers, strings, */    /* or of the form "an+b" */    : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+    ;    negation    : NOT S* negation_arg S* ')'    ;    negation_arg    : type_selector | universal | HASH | class | attrib | pseudo    ;

10.2. Lexical scanner

The following is the tokenizer, written in Flex (see [FLEX]) notation. The tokenizer is case-insensitive.

The two occurrences of "\377" represent the highest character number that current versions of Flex can deal with (decimal 255). They should be read as "\4177777" (decimal 1114111), which is the highest possible code point in Unicode/ISO-10646.[UNICODE]

%option case-insensitive    ident     [-]?{nmstart}{nmchar}*  name      {nmchar}+  nmstart   [_a-z]|{nonascii}|{escape}  nonascii  [^\0-\177]  unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?  escape    {unicode}|\\[^\n\r\f0-9a-f]  nmchar    [_a-z0-9-]|{nonascii}|{escape}  num       [0-9]+|[0-9]*\.[0-9]+  string    {string1}|{string2}  string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"  string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'  invalid   {invalid1}|{invalid2}  invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*  invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*  nl        \n|\r\n|\r|\f  w         [ \t\r\n\f]*    D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?  E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?  N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n  O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o  T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t  V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v    %%    [ \t\r\n\f]+     return S;    "~="             return INCLUDES;  "|="             return DASHMATCH;  "^="             return PREFIXMATCH;  "$="             return SUFFIXMATCH;  "*="             return SUBSTRINGMATCH;  {ident}          return IDENT;  {string}         return STRING;  {ident}"("       return FUNCTION;  {num}            return NUMBER;  "#"{name}        return HASH;  {w}"+"           return PLUS;  {w}">"           return GREATER;  {w}","           return COMMA;  {w}"~"           return TILDE;  ":"{N}{O}{T}"("  return NOT;  @{ident}         return ATKEYWORD;  {invalid}        return INVALID;  {num}%           return PERCENTAGE;  {num}{ident}     return DIMENSION;  "<!--"           return CDO;  "-->"            return CDC;    \/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */    .                return *yytext;

11. プロファイル

セレクタを利用する仕様は、どのセレクタが許可されどのセレクタが許可されないかを記すサブセットの定義と、仕様におけるセレクタの意味を説明しなければならない。

非規範的な例:

プロファイル
仕様	CSS level 1
許可するセレクタ	型セレクタ クラスセレクタ ID セレクタ :link, :visited, :active 擬似クラス 子孫結合子 ::first-line, ::first-letter 擬似要素
除外するセレクタ	全称セレクタ 属性セレクタ :hover, :focus 擬似クラス :target 擬似クラス :lang() 擬似クラス UI 要素状態擬似クラス 構造擬似クラス :not() 擬似クラス ::before, ::after 擬似要素 子結合子 兄弟結合子 名前空間の概念
その他の制約	1つの単体セレクタシーケンスつき1つのクラスセレクタしか認められない。

プロファイル
仕様	CSS level 2
許可するセレクタ	型セレクタ 全称セレクタ 属性存在セレクタと属性値セレクタ クラスセレクタ ID セレクタ :link, :visited, :active, :hover, :focus, :lang(), :first-child 擬似クラス 子孫結合子 子結合子 隣接兄弟結合子 ::first-line, ::first-letter 擬似要素 ::before, ::after 擬似要素
除外するセレクタ	部分マッチ属性セレクタ :target 擬似クラス UI 要素状態擬似クラス :first-child 以外の構造擬似クラス :not() 擬似クラス 一般兄弟結合子 名前空間の概念
その他の制約	単体セレクタシーケンスつきいくつものクラスセレクタが認められる。

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

次のセレクタ (CSS level 2) は h1 中の a 要素のうち name 属性が指定されたものすべてにマッチする。

h1 a[name]

このセレクタに付加されたすべての CSS 宣言が、セレクタにマッチした要素に適用される。

プロファイル
仕様	STTS 3
許可するセレクタ	型セレクタ 全称セレクタ 属性セレクタ クラスセレクタ ID セレクタ 構造擬似クラス すべての結合子 名前空間の概念
除外するセレクタ	受け付けない擬似クラス 擬似要素
その他の制約	いくつかのセレクタと結合子は、STTS 宣言の右側で許可されない。

STTS 3 においてセレクタには2つの異なる利用法がある。

1. CSS の選択メカニズムと同等の選択メカニズム。宣言があるセレクタに与えられたとき、そのセレクタにマッチする要素に宣言が適用される。
2. 宣言の右側に現れる記法

12. 適合性と要件

このセクションは、このセレクタ仕様の適合性を定義します。

UA がデバイスの制約によってこの仕様の一部を実装できないとしても、それは非適合とはみなされない。たとえば、インタラクティブでない UA は動的擬似クラスを実装しないだろう。

セレクタ仕様を利用するすべての仕様は プロファイル を定義し、許可するセレクタと除外するセレクタ、仕様上の制約があればそれも列挙しなければならない。

構文解析エラーによって、セレクタは invalid となる。理解できないトークンや構文解析中のポイントで許されないトークンといったものが構文解析エラーを引き起こす。

UA は次の構文解析エラーの処理において、次の点に着目しなければならない。

• 宣言されていない名前空間接頭辞 を持つ単体セレクタは invalid となる。
• invalid な単体セレクタ、invalid な結合子、もしくは invalid なトークンを含むセレクタは invalid となる。
• セレクタのグループが invalid なセレクタを含む場合、そのグループは invalid となる。

セレクタを利用する仕様は、どのように構文解析エラーを処理するかを定義しなければならない。(CSS の場合、そのようなセレクタに付加された規則全体がドロップされる。)

13. Tests

This specification has a test suite allowing user agents to verify their basic conformance to the specification. This test suite does not pretend to be exhaustive and does not cover all possible combined cases of Selectors.

14. Acknowledgements

The CSS working group would like to thank everyone who has sent comments on this specification over the years.

In particular, the working group would like to extend special thanks to Donna McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who performed the final editorial review of the last call draft. The working group would also like to thank Adam Kuehn, Boris Zbarsky, David Perrell, Elliotte Harold, Matthew Raymond, Ruud Steltenpool, Patrick Garies, Anton Prowse, and the W3C Internationalization Working Group for their last call comments and kind words.

15. References

15.1. Normative References

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 07 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607/

[CSS3NAMESPACE]

Elika J. Etemad; Anne van Kesteren. CSS Namespaces Module. 29 September 2011. W3C Recommendation. URL:http://www.w3.org/TR/2011/REC-css3-namespace-20110929/

[FLEX]

Flex: The Lexical Scanner Generator. Version 2.3.7, ISBN 1882114213

[UNICODE]

The Unicode Consortium. The Unicode Standard, Version 6.0.0, (Mountain View, CA: The Unicode Consortium, 2011. ISBN 978-1-936213-01-6) and as updated from time to time by the publication of new versions. (Seehttp://www.unicode.org/unicode/standard/versions/ for the latest version and additional information on versions of the standard and of the Unicode Character Database).
Available at http://www.unicode.org/versions/Unicode6.0.0/

[YACC]

S. C. Johnson. YACC - Yet another compiler compiler. Murray Hill. 1975. Technical Report.

15.2. Informative References

[BCP47]

A. Phillips; M. DavisTags for Identifying Languages and Matching of Language Tags. September 2009. Internet Best Current Practice 47. URL: http://www.rfc-editor.org/rfc/bcp/bcp47.txt

[CSS1]

Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411

[DOM-LEVEL-3-CORE]

Gavin Nicol; et al. Document Object Model (DOM) Level 3 Core Specification. 7 April 2004. W3C Recommendation. URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407

[HTML401]

David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL:http://www.w3.org/TR/1999/REC-html401-19991224

[MATHML]

Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) 1.01 Specification. 7 July 1999. W3C Recommendation. URL: http://www.w3.org/1999/07/REC-MathML-19990707

[STTS3]

Daniel Glazman. Simple Tree Transformation Sheets 3. Electricité de France. 11 November 1998. Submission to the W3C. URL: http://www.w3.org/TR/NOTE-STTS3

[SVG11]

Erik Dahlström et. al. Scalable Vector Graphics (SVG) 1.1 Specification. 16 August 2011. W3C Recommendation. URL:http://www.w3.org/TR/2011/REC-SVG11-20110816/

[UAX29]

Mark Davis. Text Boundaries. 25 March 2005. Unicode Standard Annex #29. URL:http://www.unicode.org/unicode/reports/tr29/tr29-9.html

[XML-NAMES]

Tim Bray; et al. Namespaces in XML 1.0 (Third Edition). 6 August 2009. W3C Proposed Edited Recommendation. URL:http://www.w3.org/TR/2009/PER-xml-names-20090806

[XML10]

C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 10 February 1998. W3C Proposed Edited Recommendation. Revised 5 February 2008 URL: http://www.w3.org/TR/2008/PER-xml-20080205