公開後に報告されたエラーや問題については、正誤表をご確認ください。
Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
セレクターは、ツリー内の要素にマッチするパターンであり、XMLドキュメント内のノードを選択するために使用できる技術のひとつです。セレクターはHTMLやXMLでの使用に最適化されており、パフォーマンスが重要なコードでも利用できるよう設計されています。
CSS(カスケーディングスタイルシート)は、HTMLやXMLドキュメントの画面表示、印刷、音声などのレンダリングを記述するための言語です。CSSはセレクターを使って、ドキュメント内の要素にスタイルプロパティを関連付けます。
本書では、CSS1 [CSS1]やCSS2 [CSS21]ですでに存在するセレクターについて説明し、さらにCSS3や他の言語で必要となる新しいセレクターを紹介します。
セレクターは以下の機能を定義します:
expression ∗ element → boolean
つまり、要素とセレクターが与えられた場合、この仕様はその要素がセレクターにマッチするかどうかを定義します。
これらの式は、例えば、サブツリー内のすべての要素に対して式を評価することで、要素の集合や単一の要素を選択するためにも使用できます。STTS(Simple Tree Transformation Sheets)は、XMLツリーを変換するための言語であり、この仕組みを利用します。[STTS3]
このセクションは、公開時点での文書のステータスを説明します。他の文書が本書に取って代わる場合があります。現在のW3C出版物の一覧および本技術レポートの最新改訂版は、W3C技術レポート一覧(https://www.w3.org/TR/)で確認できます。
このW3C勧告は、 2018年9月11日付の提案勧告と同一内容ですが、ステータスと定型文がW3C勧告用に更新されています。
本書はW3Cメンバー、ソフトウェア開発者、他のW3Cグループや関係者によってレビューされ、ディレクターによりW3C勧告として承認されています。これは安定した文書であり、参考資料や他の文書から引用できます。W3Cの役割は、この勧告に注目を集め、その広範な導入を推進することです。これにより、Webの機能性と相互運用性が向上します。
この文書は、CSSワーキンググループによって、W3C勧告として作成されました。
提案勧告は広くレビューされ、実装の準備ができた文書です。W3Cは、すべての人がこの仕様を実装し、GitHub issue として2018年10月11日までにコメントを返すことを推奨します。 すべてのissueおよびコメントはアーカイブされており、過去の アーカイブもあります。
この文書は、W3C特許ポリシーに基づき活動するグループによって作成されました。W3Cは、グループの成果物に関連して行われた特許開示の公開リストを管理しています。 そのページには特許開示の方法も記載されています。特許について実際の知識があり、その特許が必須クレームを含むと考える個人は、W3C特許ポリシー第6節に従って情報を開示する必要があります。
この文書は、2018年2月1日版 W3Cプロセス文書に従って管理されています。
別途、テスト スイートおよび 実装レポートが公開されています。
Selectors Level 1 および Selectors Level 2 は、それぞれ CSS1 と CSS2.1 の仕様で定義されているセレクター機能のサブセットとして定義されます。
この仕様のいくつかの機能は CSS に特化しているか、CSS 固有の制限や規則があります。本仕様では、そうした内容は CSS2.1 を基準に記述されています。[CSS21]
この仕様書のすべての本文は規範的ですが、例、注記、および明示的に非規範的と記載されたセクションは除きます。
追加の用語は Definitions セクション([CSS21])で定義されています。ドキュメントのソースコードや断片の例は XML [XML10] または HTML [HTML401][HTML5] の構文で示します。
このセクションは非規範的です。
CSS2のセレクターとSelectorsの主な違いは以下の通りです:
このセクションは非規範的です。後続のセクションの概要のみをまとめています。
セレクターは構造を表します。この構造は、(例:CSSルールの条件として)ドキュメントツリー内でどの要素がセレクターに一致するかを決定する条件として、またはその構造に対応するHTMLやXML断片の平坦な記述として利用できます。
セレクターは単純な要素名から、より豊かな文脈表現まで幅広く記述できます。
以下の表はセレクター構文のまとめです:
パターン | 表すもの | 説明 | レベル |
---|---|---|---|
* | すべての要素 | 全称セレクター | 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 | ハイパーリンクのソースアンカーとなり、ターゲットがまだ未訪問(: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(例:ラジオボタンやチェックボックス) | UI要素状態疑似クラス | 3 |
E::first-line | E要素の最初の整形行 | ::first-line 疑似要素 | 1 |
E::first-letter | E要素の最初の整形文字 | ::first-letter 疑似要素 | 1 |
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 |
すべてのセレクターの構文は、ASCII範囲内(つまり [a-z] と [A-Z] は同等)で大文字小文字を区別しません。ただし、セレクターの制御外の部分は除きます。セレクター内のドキュメント言語の要素名、属性名、属性値の大文字小文字の区別は、ドキュメント言語によって異なります。たとえば、HTMLでは要素名は大文字小文字を区別しませんが、XMLでは区別されます。名前空間接頭辞の大文字小文字の区別は、[CSS3NAMESPACE] で定義されています。
セレクターとは、コンビネーターで区切られた1つ以上の単純セレクターの並びの連鎖です。セレクターの最後の単純セレクターの並びには、1つの疑似要素を付加できます。
単純セレクターの並びは、コンビネーターで区切られていない単純セレクターの連鎖です。必ず型セレクターまたは全称セレクターから始まります。並びの中に他の型セレクターや全称セレクターは許可されません。
単純セレクターとは、型セレクター、全称セレクター、属性セレクター、クラスセレクター、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)などの他の空白類似文字は空白とはなりません。
セレクターで表現されるドキュメントツリーの要素は、セレクターの対象です。単一の単純セレクターの並びだけからなるセレクターは、その条件を満たすすべての要素を表現します。別の単純セレクターの並びとコンビネーターを前置すると、追加の一致条件が課されるため、セレクターの対象は常に最後の単純セレクターの並びが表す要素の部分集合となります。
単純セレクターの並びや疑似要素が含まれない空のセレクターは、不正なセレクターです。
セレクター内の文字は、CSSと同じエスケープ規則に従ってバックスラッシュでエスケープできます。[CSS21]。
一部のセレクターは名前空間接頭辞をサポートします。名前空間接頭辞の宣言方法は、セレクターを利用する言語で規定する必要があります。言語で宣言方法が規定されていない場合、接頭辞は宣言されません。CSSでは、名前空間接頭辞は@namespace
規則によって宣言します。[CSS3NAMESPACE]
カンマ区切りのセレクターリストは、各セレクターが選択するすべての要素の和集合を表します。(カンマは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 }
注意: この例で等価となるのは、すべてのセレクターが有効なセレクターである場合です。もしこの中の1つのセレクターが無効だった場合、セレクターのグループ全体が無効となります。この場合、3つの見出し要素すべてのルールが無効になりますが、個別のルールであれば無効なのは1つだけです。
無効な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
)は全体として無効であり、スタイル規則全体が破棄されます。(セレクターをグループ化しない場合は、h2..foo
のルールだけが破棄されます。)
型セレクターは、CSS修飾名 [CSS3NAMESPACE]の構文で書かれたドキュメント言語の要素型名です。型セレクターは、ドキュメントツリー内のその要素型のインスタンスを表します。
例:
次のセレクターは、ドキュメントツリー内の h1
要素を表します:
h1
型セレクターは、オプションで名前空間コンポーネントを許可します。事前に宣言された名前空間接頭辞を、名前空間区切り記号「縦棒」(U+007C,
|
)で要素名の前に付加できます。(XMLにおける名前空間の利用については、例として[XML-NAMES]を参照。)
名前空間コンポーネントを空(区切り記号の前に接頭辞なし)にすることで、名前空間を持たない要素のみを表すセレクターとなります。
名前空間接頭辞にアスタリスクを使うと、すべての名前空間(名前空間なしも含む)の要素を表すセレクターとなります。
名前空間コンポーネントがない(区切り記号なし)型セレクターは、要素の名前空間に関係なく要素を表します(「*|
」と同等)。ただし、名前空間付きセレクターのためのデフォルト名前空間が宣言されている場合は、デフォルト名前空間内の要素のみを表します。
名前空間接頭辞が事前に宣言されていない場合、その型セレクターは不正なセレクターです。
名前空間対応のクライアントでは、型セレクターの名前部分(区切り記号の後ろの部分)は、要素の修飾名のローカル部分とだけ一致します。
まとめ:
ns|E
*|E
|E
E
CSS例:
@namespace foo url(http://www.example.com); foo|h1 { color: blue } /* 1つ目のルール */ foo|* { color: yellow } /* 2つ目のルール */ |h1 { color: red } /* ...*/ *|h1 { color: green } h1 { color: green }
1つ目のルール(@namespace
のatルールは除く)は、"http://www.example.com" 名前空間の h1
要素のみに一致します。
2つ目のルールは、"http://www.example.com" 名前空間内のすべての要素に一致します。
3つ目のルールは、名前空間なしの h1
要素のみに一致します。
4つ目のルールは、すべての名前空間(名前空間なしも含む)の h1
要素に一致します。
最後のルールは、デフォルト名前空間が定義されていないため、4つ目のルールと同等です。
全称セレクターは、CSS修飾名CSS qualified name [CSS3NAMESPACE]でアスタリスク(* U+002A)をローカル名として書き、任意の要素型の修飾名を表します。デフォルト名前空間が指定されていなければ、どの名前空間(名前空間なしも含む)の任意の要素を表します。デフォルト名前空間が指定されている場合は、全称セレクターと名前空間を参照してください。
全称セレクター *
(名前空間接頭辞なし)を 単純セレクターの並びの唯一の構成要素としない場合、または直後に疑似要素が続く場合、*
は省略でき、全称セレクターが暗黙的に存在するとみなします。
例:
*[hreflang|=en]
と [hreflang|=en]
は同等
*.warning
と .warning
は同等
*#myid
と #myid
は同等
注: *
は省略しないことが推奨されます。たとえば div :first-child
と div:first-child
の混同が減るためです。ここでは div *:first-child
の方が読みやすいです。
全称セレクターはオプションで名前空間コンポーネントを持てます。使用方法は以下のとおりです:
ns|*
*|*
|*
*
事前に宣言されていない名前空間接頭辞を含む全称セレクターは、不正なセレクターです。
セレクターは要素の属性を表現できます。セレクターが要素と一致するかを判定する式として使われる場合、属性セレクターは、その要素が属性セレクターで表現される属性を持っていれば一致したとみなします。
CSS2では4つの属性セレクターが導入されました:
[att]
att
属性を持つ要素(値は問わない)を表します。
[att=val]
att
属性の値が"val"と完全一致する要素を表します。
[att~=val]
att
属性の値が空白区切りの単語リストで、その中の1つが"val"と完全一致する要素を表します。"val"に空白が含まれている場合は一致しません(単語は空白で区切られるため)。また、"val"が空文字列の場合も一致しません。
[att|=val]
att
属性の値が"val"と完全一致、または"val"の直後に"-"(U+002D)が続く値である要素を表します。主に言語サブコード(例:HTMLのa
要素のhreflang
属性)で一致判定用に使われます。BCP
47 ([BCP47])
などを参照。lang
(またはxml:lang
)の言語サブコード判定については、:lang
疑似クラスを参照してください。
属性値は CSSの識別子または文字列でなければなりません。[CSS21] セレクター内の属性名・値の大文字小文字の区別はドキュメント言語によって異なります。
例:
次の属性セレクターは、title
属性を持つ h1
要素(値は問わない)を表します:
h1[title]
次の例では、class
属性値が"example"と完全一致するspan
要素を表します:
span[class="example"]
複数の属性セレクターで、要素の複数属性や同じ属性への複数条件を表現できます。次のセレクターは、hello
属性値が"Cleveland"、goodbye
属性値が"Columbus"と完全一致するspan
要素を表します:
span[hello="Cleveland"][goodbye="Columbus"]
次のCSS例では、"="と"~="の違いを示します。最初のセレクターは、たとえば a
要素の rel
属性値が "copyright copyleft copyeditor"
の場合に一致します。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
値が"romeo"または"juliet"のとき、DIALOGUE
要素を表します:
DIALOGUE[character=romeo] DIALOGUE[character=juliet]
属性値の部分文字列に一致するための属性セレクターが3つ追加されています:
[att^=val]
att
属性の値が"val"で始まる要素を表します。"val"が空文字列の場合、このセレクターは何も表しません。
[att$=val]
att
属性の値が"val"で終わる要素を表します。"val"が空文字列の場合、このセレクターは何も表しません。
[att*=val]
att
属性の値に"val"という部分文字列が1つ以上含まれる要素を表します。"val"が空文字列の場合、このセレクターは何も表しません。
属性値は CSS の識別子または文字列でなければなりません。 [CSS21] セレクター内の属性名の大文字小文字の区別はドキュメント言語によって異なります。
例:
次のセレクターは画像を参照するHTMLのobject
要素を表します:
object[type^="image/"]
次のセレクターは、href
属性値が".html"で終わるHTMLのa
要素を表します:
a[href$=".html"]
次のセレクターは、title
属性値に"hello"という部分文字列が含まれるHTMLのp
要素を表します:
p[title*="hello"]
属性セレクター内の属性名はCSS修飾名として記述されます:事前に宣言された名前空間接頭辞を、名前空間区切り記号「縦棒」(|
)で属性名の前に付加できます。XML名前空間勧告に従い、属性にはデフォルト名前空間は適用されません。そのため、名前空間コンポーネントなしの属性セレクターは、名前空間なしの属性だけに適用されます("|attr
"と同等)。名前空間接頭辞にアスタリスクを使うことで、属性の名前空間に関係なくすべての属性名に一致させることができます。
事前に宣言されていない名前空間接頭辞を含む属性名の属性セレクターは、不正なセレクターです。
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
属性を持つ要素だけに一致します。
最後の2つのルールは同等で、名前空間なしのatt
属性を持つ要素だけに一致します。
属性セレクターはドキュメントツリー内の属性値を表します。そのドキュメントツリーがどのように構築されるかはセレクターの範囲外です。いくつかの文書フォーマットでは、DTD等で属性のデフォルト値を定義できますが、属性セレクターで選択できるのは、それらの値がドキュメントツリーに現れている場合のみです。デフォルト値がツリーに含まれていてもいなくてもセレクターが機能するよう設計されるべきです。
例えば、XML UAは「外部サブセット」を読むことができますが、必須ではありません。一方「内部サブセット」のデフォルト属性値は必須で確認しなければなりません。(これらのサブセットの定義については[XML10]参照。)UAによっては、DTDの外部サブセットで定義されたデフォルト属性値がドキュメントツリーに現れない場合もあります。
XML名前空間を認識するUAは、その名前空間の知識を使ってデフォルト属性値を文書内に存在するかのように扱うことができますが、必須ではありません。(例えば、XHTML UAはXHTML DTDの組み込み知識を使う必要はありません。XML 1.0における名前空間の詳細は[XML-NAMES]参照。)
注: 多くの実装は外部サブセットを無視する選択をします。これは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つ目を上書きします。デフォルトケースだけに適用するプロパティ宣言が、非デフォルトケースのスタイルルールで必ず上書きされるよう注意が必要です。
HTMLを扱う場合、著者は「ピリオド」記法(U+002E, .
、full
stopとも呼ばれる)をclass
属性表現の~=
記法の代替として使うことができます。つまり、HTMLではdiv.value
とdiv[class~=value]
は同じ意味です。属性値はピリオド(.
)の直後に記述する必要があります。
UAは、該当名前空間の知識によりどの属性が「class」属性か判定できる場合、XML文書でもピリオド記法のセレクターを適用できます。こうした名前空間固有の知識の例としては、特定の名前空間仕様書の記述(例:SVG 1.1 [SVG11]のSVG
class
属性や、MathML [MATHML3]の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要素 */
これらのルールの場合、下記の最初のH1
インスタンスは緑色にならず、2つ目は緑色になります:
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
次のルールは、class
属性値がpastoral
とmarine
を両方含む空白区切り値リストに割り当てられているP
要素に一致します:
p.pastoral.marine { color: green }
このルールは、class="pastoral blue aqua marine"
の場合は一致しますが、class="pastoral blue"
の場合は一致しません。
注:
CSSではclass
属性に強力な機能があるため、著者が要素(例:HTMLのDIV
やSPAN
など)にほとんど関連付けられた表示なしで独自の「文書言語」を設計し、class
属性でスタイル情報を割り当てることも理論的には可能です。しかし、文書言語の構造要素には一般に認知された意味があるため、著者定義のクラスだけで文書設計することは避けるべきです。
注: 要素が複数のclass属性を持つ場合、それらの値は空白区切りで連結されてからクラス検索が行われます。現時点でこのような状況が発生する方法はワーキンググループでは認識されていませんが、本仕様ではこの挙動を明示的に非規範的としています。
文書言語にはID型として宣言された属性を含む場合があります。ID型属性が特別なのは、適合する文書では、こうした属性値がどの要素型においても重複してはならない点です。文書言語が何であれ、ID型属性はその要素を一意に識別するために使えます。HTMLのすべてのID属性は"id"という名前ですが、XMLアプリケーションではID属性名が異なる場合もあり、同じ制約が適用されます。
文書言語のID型属性を使うことで、著者はドキュメントツリー内のある要素インスタンスに識別子を割り当てることができます。IDセレクターは「ナンバーサイン」(U+0023, #
)の直後にID値(CSSの識別子)を記述します。IDセレクターは、IDセレクター内の識別子と一致する識別子を持つ要素インスタンスを表します。
セレクター仕様はUAが要素のID型属性をどう判定するかを規定しません。UAは、例えば文書のDTDを読む、情報をハードコードする、ユーザーに尋ねる等して判定できます。
例:
次のIDセレクターは、ID型属性値が"chapter1"のh1
要素を表します:
h1#chapter1
次のIDセレクターは、ID型属性値が"chapter1"のすべての要素を表します:
#chapter1
次のセレクターは、ID型属性値が"z98y"のすべての要素を表します:
*#z98y
注: XML 1.0 [XML10]では、どの属性が要素のIDを含むかの情報はDTDやスキーマに含まれます。XMLをパースするUAは必ずしもDTDを読むとは限らず、要素のIDを認識できない場合もあります(ただし、UAが該当名前空間の知識を持つことでID属性が判定できる場合もあります)。スタイルシート作者がUAがID属性を認識しない可能性を知っている場合、#p371
の代わりに通常の属性セレクター[name=p371]
を使うべきです。
要素が複数のID属性を持つ場合、IDセレクターの目的ではすべての属性がその要素のIDとして扱われます。xml:id, DOM, XML DTD, 名前空間固有知識などの混合によりこのような状況が発生し得ます。
疑似クラスの概念は、ドキュメントツリー外の情報や他の単純セレクターでは表現できない条件に基づく選択を可能にするために導入されました。
疑似クラスは常に「コロン」(:
)の後に疑似クラス名が付き、必要に応じて括弧内に値が続きます。
疑似クラスはセレクター内のすべての単純セレクター並びで使用できます。疑似クラスは、先頭の型セレクターや全称セレクター(省略可能)の後なら、単純セレクター並びのどこでも使用できます。疑似クラス名は大文字小文字を区別しません。一部の疑似クラスは排他的ですが、他のものは同じ要素に同時適用できます。疑似クラスは動的で、ユーザーが文書と対話することで要素が疑似クラスを獲得・喪失する場合があります。
動的疑似クラスは、名前・属性・内容以外の特徴(原則としてドキュメントツリーから推論できない特徴)で要素を分類します。
動的疑似クラスは文書ソースやドキュメントツリーには現れません。
ユーザーエージェントは通常、未訪問リンクと既訪問リンクを異なる表示にします。Selectorsでは、これらを区別するための疑似クラス:linkおよび :visitedが提供されています:
一定時間後、ユーザーエージェントは訪問済みリンクを(未訪問の)‘:link
’状態に戻すことができます。
この2つの状態は相互排他的です。
例:
次のセレクターは、classexternal
を持ち、既に訪問済みのリンクを表します:
a.external:visited
注: :link および :visited 疑似クラスを悪用することで、著者がユーザーの同意なしにユーザーが訪問したサイトを判定することが可能です。
そのため、UAはすべてのリンクを未訪問として扱ったり、訪問済みリンクと未訪問リンクの表示を分けつつプライバシーを保護するための措置を実装することがあります。
インタラクティブなユーザーエージェントは、ユーザー操作に応じて表示を変更することがあります。Selectorsでは、ユーザーが操作中の要素を選択するための3つの疑似クラスが提供されています。
:active
は主ボタンまたは主アクティベーションボタン(通常は「左」ボタン)およびそのエイリアスにのみ適用されます。
どの要素が:active
や:focus
になれるかは、文書言語や実装によって制限がある場合があります。
これらの疑似クラスは排他的ではありません。要素が複数の疑似クラスに同時一致することもあります。
Selectorsでは、‘:active
’や‘:hover
’状態になっている要素の親要素が同じ状態になるかどうかは定義しません。
注: ‘:hover
’状態が、子要素がポインティングデバイスで指定されたことで親要素に適用される場合、その親要素がポインティングデバイス下にない状態でも‘:hover
’が適用される可能性があります。
例:
a:link /* 未訪問リンク */ a:visited /* 訪問済みリンク */ a:hover /* ホバー中 */ a:active /* アクティブなリンク */
動的疑似クラスの組み合わせ例:
a:focus a:focus:hover
最後のセレクターは、:focusと:hoverの両方の疑似クラス状態にあるa
要素に一致します。
注: 要素は‘:visited
’と‘:active
’(または‘:link
’と‘:active
’)の両方に一致することができます。
URIの中には、リソース内の位置を示すものがあります。この種のURIは「ナンバーサイン」(#)の後にアンカー識別子(フラグメント識別子と呼ばれる)が続きます。
フラグメント識別子付きのURIは、文書内の特定の要素(ターゲット要素)へのリンクとなります。例えば、HTML文書内のsection_2
というアンカーを指すURIは次のようになります:
http://example.com/html/top.html#section_2
ターゲット要素は、:target疑似クラスで表現できます。文書のURIにフラグメント識別子が含まれていない場合、その文書にはターゲット要素が存在しません。
例:
p.note:target
このセレクターは、参照URIのターゲット要素となっているnote
クラスのp
要素を表します。
CSS例:
ここでは、:target
疑似クラスを使い、ターゲット要素を赤色にし、もしあればその前に画像を表示します:
*:target { color : red } *:target::before { content : url(target.png) }
文書言語が要素の人間言語の判定方法を指定している場合、要素の言語に基づいて要素を表すセレクターを書くことができます。例えばHTML [HTML401]では、言語はlang
属性や、場合によってはmeta
要素やプロトコル(HTTPヘッダーなど)の情報で決定されます。XMLではxml:lang
属性が使われ、その他にも文書言語ごとに判定方法がある場合があります。
疑似クラス:lang(C)は、言語Cである要素を表します。:lang()
セレクターで要素が表されるかどうかは、その要素の言語値(必要であればBCP
47構文に正規化)が識別子Cと等しいか、またはCの直後に"-"(U+002D)が続く場合のみです。Cの一致判定はASCII範囲内で大文字小文字を区別せずに行われます。Cは有効な言語名である必要はありません。
Cは有効なCSS 識別子 [CSS21]でなければならず、空ではいけません(空の場合、セレクターは無効です)。
注: 文書やプロトコルは、BCP 47 [BCP47]やその後継のコード、XML文書の場合は"xml:lang"属性で言語を示すことが推奨されます。[XML10]も参照。「FAQ: 二文字または三文字の言語コード」も参考にしてください。 "FAQ: Two-letter or three-letter language codes."
例:
次の2つのセレクターは、ベルギーのフランス語またはドイツ語のHTML文書を表します。次の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だけ(LANG属性を持つため)ですが、:lang(fr)
にはBODYとPの両方が一致します(両方ともフランス語であるため)。PにはLANG属性がないので[lang|=fr]
には一致しません。
<body lang=fr> <p>Je suis français.</p> </body>
:enabled疑似クラスは、有効状態にあるユーザーインターフェース要素を表します。これらの要素には対応する無効状態があります。
反対に、:disabled疑似クラスは、無効状態にあるユーザーインターフェース要素を表します。これらの要素には対応する有効状態があります。
有効状態・無効状態・ユーザーインターフェース要素が何に該当するかは言語依存です。一般的な文書では、ほとんどの要素は:enabled
にも:disabled
にも該当しません。
注:
ユーザーがUI要素とやり取りできるかどうかに影響するCSSプロパティ(display
やvisibility
など)は、:enabled
や:disabled
の一致判定には影響しません。
ラジオボタンやチェックボックスは、ユーザーによって切り替え可能です。メニュー項目の中には、ユーザーが選択すると「チェック」されるものがあります。このような要素が「オン」になっているとき、:checked疑似クラスが適用されます。:checked
疑似クラスは動的で、ユーザーの操作により変化しますが、文書内のセマンティック属性の存在にも基づくため、すべてのメディアに適用されます。例えば、:checked
疑似クラスは、HTML4のselected
やchecked
属性を持つ要素(HTML4
17.2.1節参照)に最初は適用されますが、ユーザーが「オフ」に切り替えると、:checked
疑似クラスは適用されなくなります。
注:
ラジオボタンやチェックボックスはユーザーによって切り替えられますが、属性やDOM操作によって「不定」状態になることがあります(チェック済みでも未チェックでもない)。この仕様の将来のバージョンでは、こうした要素に適用される:indeterminate
疑似クラスが導入される可能性があります。
Selectorsは、他の単純セレクターやコンビネーターでは表現できない、ドキュメントツリー内の追加情報に基づく選択を可能にするために構造疑似クラスの概念を導入しています。
兄弟要素の位置を計算する際、独立したテキストやその他の非要素ノードは数えません。インデックス番号は1から始まります。
:root疑似クラスは、文書のルート要素を表します。HTML4の場合、これは常にHTML
要素です。
:nth-child(an
+b)
疑似クラス記法は、文書ツリー内でその要素の前に
an
+b-1個の兄弟要素が存在する要素を表します(n
は0以上の整数)。親要素がなくても構いません。aとbが正の値の場合、要素の子をa個ずつのグループに分け(最後のグループは余り)、各グループのb番目の要素を選択します。例えば、テーブルの奇数行や偶数行、段落の色を4色で交互にする場合などに使えます。aとbは整数(正・負・ゼロ)でなければなりません。最初の子要素のインデックスは1です。
また、:nth-child()
は‘
’や‘odd
’を引数として取ることもできます。‘even
’はodd
2n+1
と同じ意味、‘
’はeven
2n
と同じ意味です。
:nth-child()
の引数は下記の文法に一致しなければなりません。INTEGER
は[0-9]+
に一致し、残りのトークン化は10.2節の字句スキャナーを参照してください:
nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ;
例:
tr:nth-child(2n+1) /* HTMLテーブルの奇数行 */ tr:nth-child(odd) /* 同じ */ tr:nth-child(2n+0) /* 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; }
bが負の符号のとき、式中の「+」は削除し、負値を示す「-」に置き換えます。
例:
:nth-child(10n-1) /* 9番目、19番目、29番目…の要素 */ :nth-child(10n+9) /* 同じ */ :nth-child(10n+-1) /* 文法的に無効であり、無視される */
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テーブルの偶数行 */ tr:nth-child(2n) /* 同じ */
「(」の後、「)」の前、また「+」や「-」の両側に空白を入れることができます。
空白を含む有効な例:
:nth-child( 3n + 1 ) :nth-child( +3n - 2 ) :nth-child( -n+ 6) :nth-child( +6 )
空白を含む無効な例:
:nth-child(3 n) :nth-child(+ 2n) :nth-child(+ 2)
aもbも0の場合、この疑似クラスは文書ツリー内のいかなる要素も表しません。
aは負の値も取れますが、n
≥0のときの正の値のみが文書ツリー内の要素を表すことができます。
例:
html|tr:nth-child(-n+6) /* XHTMLテーブルの最初の6行を表す */
:nth-last-child(an+b)
疑似クラス記法は、ドキュメントツリー内でその要素の後ろに an
+b-1
個の兄弟要素が存在する要素を表します(n
は0以上の整数)。親要素がなくても構いません。引数の文法については :nth-child()
疑似クラスを参照してください。‘
’や‘even
’も引数として利用できます。
odd
例:
tr:nth-last-child(-n+2) /* HTMLテーブルの最後の2行を表す */ foo:nth-last-child(odd) /* 親要素の中で、後ろから数えて奇数番目のfoo要素をすべて表す */
:nth-of-type(an+b)
疑似クラス記法は、ドキュメントツリー内でその要素の前に同じ展開要素名を持つ兄弟要素が an
+b-1
個存在する要素を表します(n
は0以上の整数)。親要素がなくても構いません。引数の文法については :nth-child()
疑似クラスを参照してください。‘
’や‘even
’も利用可能です。
odd
CSS例:
この疑似クラスを使うことで、浮動画像の位置を交互にすることができます:
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }
:nth-last-of-type(an+b)
疑似クラス記法は、ドキュメントツリー内でその要素の後ろに同じ展開要素名を持つ兄弟要素が an
+b-1
個存在する要素を表します(n
は0以上の整数)。親要素がなくても構いません。引数の文法については :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)
:nth-child(1)
と同じです。:first-child 疑似クラスは、兄弟リストの最初の要素を表します。
例:
次のセレクターは、div
要素の最初の子となるp
要素を表します:
div > p:first-child
このセレクターは下記フラグメントのdiv
内のp
要素を表せます:
<p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div>ただし、下記フラグメントの2番目の
p
要素は表せません:
<p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div>
次の2つのセレクターは通常同等です:
* > a:first-child /* どの要素でも最初の子となるa要素 */ a:first-child /* 同じ(aがルート要素でない場合) */
:nth-last-child(1)
と同じです。:last-child 疑似クラスは、兄弟リストの最後の要素を表します。
例:
次のセレクターは、順序付きリストol
の最後の子となるリスト項目li
要素を表します。
ol > li:last-child
:nth-of-type(1)
と同じです。:first-of-type
疑似クラスは、同じ型の兄弟の中で最初となる要素を表します。
例:
次のセレクターは、定義リストdl
内の定義タイトルdt
要素で、その親要素の子リストの中で最初のdt
を表します。
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>
:nth-last-of-type(1)
と同じです。:last-of-type 疑似クラスは、同じ型の兄弟の中で最後となる要素を表します。
例:
次のセレクターは、テーブル行tr
の最後のデータセル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 疑似クラスは、まったく子要素を持たない要素を表します。ドキュメントツリー上では、要素ノードと内容ノード(DOM [DOM-LEVEL-3-CORE] のテキストノード、CDATAノード、エンティティ参照など)のデータがゼロ長ではない場合のみ空でないとみなします。コメント、処理命令、その他のノードは要素が空かどうかの判定に影響しません。
例:
p:empty
は次のフラグメントに対して有効です:
<p></p>
foo:empty
は下記フラグメントには有効ではありません:
<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>this is not <bar>:empty</bar></foo>
このセクションは意図的に空白です。(以前は:contains()
疑似クラスを定義していました。)
否定疑似クラス :not(X) は、単純セレクター(否定疑似クラス自身は除外)を引数に取る関数型記法です。引数に一致しない要素を表します。
否定は入れ子にできません。:not(:not(...))
は無効です。また、疑似要素は単純セレクターではないので、:not()
の引数としては無効です。
例:
次のセレクターは、HTML文書内で無効化されていないすべてのbutton
要素に一致します。
button:not([DISABLED])
次のセレクターは、FOO
以外のすべての要素を表します。
*:not(FOO)
次のセレクター群は、リンク以外のすべてのHTML要素を表します。
html|*:not(:link):not(:visited)
デフォルト名前空間宣言は、引数が全称セレクターまたは型セレクターの場合を除き、否定疑似クラスの引数に影響しません。
例:
デフォルト名前空間が "http://example.com/" にバインドされていると仮定すると、次のセレクターはその名前空間に属さないすべての要素を表します:
*|*:not(*)
次のセレクターは、ホバー状態でないすべての要素(名前空間を問わず)に一致します。特に、デフォルト名前空間内の非ホバー要素だけに限定されず、デフォルト名前空間外の要素もホバー状態のときはこのルールに一致しません。
*|*:not(:hover)
注: :not() 疑似クラスは、無意味なセレクターを書くことも可能です。例えば
:not(*|*)
(どの要素も表さない)、foo:not(bar)
(foo
と同等だが詳細度が高い)などです。
疑似要素は、ドキュメント言語で規定されたものを超えたドキュメントツリーの抽象的な表現を作成します。例えば、ドキュメント言語では要素内容の最初の文字や最初の行にアクセスする仕組みはありませんが、疑似要素を使えばそれらに参照できます。また、疑似要素は、ソース文書には存在しない内容(例:::before
や::after
疑似要素による生成内容)に対しても参照できます。
疑似要素はコロン2つ(::
)+疑似要素名で構成されます。
この::
記法は、疑似クラスと疑似要素を区別するために本書で導入されました。既存のスタイルシートとの互換性のため、ユーザーエージェントはCSSレベル1および2で導入された疑似要素(:first-line
、:first-letter
、:before
、:after
)については、旧来のコロン1つ記法も許容しなければなりません。この互換性は、本仕様で新しく導入された疑似要素には認められません。
セレクターごとに1つだけ疑似要素を記述でき、もし使う場合は、そのセレクターの対象を表す単純セレクター並びの後に記述します。注: 将来的な仕様では、セレクターごとに複数の疑似要素が許可される可能性もあります。
::first-line 疑似要素は、要素の最初の整形行の内容を表します。
CSS例:
p::first-line { text-transform: uppercase }
このルールは「すべてのp
要素の最初の行の文字を大文字にする」という意味です。
p::first-line
セレクターは実際の文書要素には一致しません。準拠ユーザーエージェントが各p
要素の先頭に挿入する疑似要素に一致します。
最初の行の長さは、ページ幅やフォントサイズなど様々な要因によって決まります。したがって、通常の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.
この段落は、ユーザーエージェントによって::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>
ユーザーエージェントは、::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>
CSSでは、::first-line
疑似要素は、ブロックボックス、インラインブロック、テーブルキャプション、テーブルセルなどのブロック状コンテナに付加された場合のみ効果があります。この場合、そのコンテナの最初の整形行を指します。
要素の最初の整形行は、同じフロー内のブロックレベル子孫内にも現れる場合があります(浮動やポジショニングによりフロー外でない限り)。例えば <DIV><P>This
line...</P></DIV>
の場合、DIV
の最初の行はP
の最初の行です(両方がブロックレベルと仮定)。
テーブルセルやインラインブロックの最初の行は、祖先要素の最初の整形行にはなりません。したがって <DIV><P
STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV>
の場合、DIV
の最初の整形行は "Hello" ではありません。
注:
次のフラグメントのp
の最初の行は文字を含みません(HTML4のbr
のデフォルトスタイルを仮定)。"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プロパティは ::first-line
疑似要素に適用できます:フォントプロパティ、色プロパティ、背景プロパティ、‘word-spacing
’、‘letter-spacing
’、‘text-decoration
’、‘text-transform
’、‘line-height
’。UAは他のプロパティも適用して構いません。
CSS継承時、子要素の最初の行に現れる部分は、::first-line
疑似要素から適用可能なプロパティのみ継承します。他のプロパティはすべて、最初の行疑似要素の非疑似要素の親から継承されます。(子要素の最初の行以外の部分は常にその子要素の親から継承されます。)
::first-letter 疑似要素は、要素の最初の文字を表します。この文字の前に他のコンテンツ(画像やインラインテーブルなど)が行内に存在しない場合に適用されます。::first-letter 疑似要素は、初めの一文字やドロップキャップ(飾り文字)など、一般的なタイポグラフィ効果に使用できます。
最初の文字の前後にある句読点(Unicodeの "open" (Ps), "close" (Pe), "initial" (Pi), "final" (Pf), "other" (Po) の句読点クラスで定義された文字)は、含める必要があります。[UNICODE]
::first-letter
疑似要素は、最初の文字が数字の場合(例:"67 million dollars is a lot of
money." の "6")にも適用されます。
注: 場合によっては ::first-letter
疑似要素は行頭の最初の非句読点文字だけでなく、さらに多くの文字を含めるべきです。例えば、結合文字は基底文字と一緒に扱う必要があります。また、言語によっては特定の文字の組み合わせに固有のルールがある場合があります。UAによる ::first-letter
の定義には、少なくともUAX29で定義されたデフォルトの書記素クラスタを含めるべきであり、必要に応じてそれ以上を含めても構いません。例えばオランダ語では、"ij" という文字の組み合わせが要素の先頭に現れる場合、両方の文字を ::first-letter
疑似要素として扱うべきです。[UAX29]
::first-letter
を構成する文字が同じ要素内に存在しない場合(例:<p>‘<em>T...
の
"‘T")、UAは1つの要素から、両方の要素から、または疑似要素自体を作成しない選択をしても構いません。
同様に、ブロックの最初の文字が行の先頭にない場合(双方向の並び替えなどで)、UAは疑似要素を作成しなくても構いません。
例:
次のCSSとHTMLの例は、疑似要素が重なり合う場合の挙動を示します。各P要素の最初の文字は緑色でフォントサイズが ‘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
は何にも一致しません(HTML 4の br
のデフォルトスタイルの場合)。特に "First" の "F" は一致しません。
CSSでは ::first-letter
疑似要素は、block, list-item, table-cell, table-caption,
inline-block などのブロック状コンテナに適用されます。注:
将来の仕様では、より多くのdisplay型に適用できるようになる可能性があります。
::first-letter
疑似要素は、テキストを含むすべての要素、または同じフロー内にテキストを含む子孫を持つ要素に使用できます。UAは
::first-letter 疑似要素の仮想開始タグが、最初のテキストの直前に入るかのように振る舞うべきです(そのテキストが子孫要素内であっても)。
例:
このHTMLフラグメントの仮想タグ列は:
<div> <p>The first text.
次のようになります:
<div> <p><div::first-letter><p::first-letter>T</...></...>he first text.
CSSでは、table-cell や inline-block の最初の文字は祖先要素の first-letter にはなりません。つまり <DIV><P
STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV>
の場合、DIVの最初の文字は "H" ではありません。実際、DIVには first-letter がありません。
要素がリスト項目(‘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-line 疑似要素は ‘float
’ プロパティが ‘none
’
の場合はインラインレベル要素に似ています。それ以外の場合は浮動要素に似ています。::first-letter
疑似要素に適用できるプロパティは次のとおりです:フォントプロパティ、‘text-decoration
’、‘text-transform
’、‘letter-spacing
’、‘word-spacing
’(適切な場合)、‘line-height
’、‘float
’、‘vertical-align
’(‘float
’が‘none’の時のみ)、マージンプロパティ、パディングプロパティ、ボーダープロパティ、色プロパティ、背景プロパティ。UAは他のプロパティも適用して構いません。タイポグラフィ的に正しいドロップキャップやイニシャルキャップを表示できるよう、UAは文字の形状に基づいて
line-height, 幅, 高さを通常の要素とは異なる計算で選択しても構いません。
例:
このCSSとHTMLの例は、イニシャルキャップの表示例です。‘line-height
’(1.1)が ::first-letter
疑似要素に継承されていますが、この例のUAは最初の文字の高さを異なる方法で計算しているため、最初の2行の間に不要な空間が生じません。また、first-letter の仮想開始タグは span
の内側にあり、最初の文字のフォントウェイトは normal で、span の bold ではありません:
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-letter
疑似要素のタグは内容(つまり最初の文字)に隣接しており、::first-line
疑似要素の開始タグはブロック要素の開始タグの直後に挿入されることに注意してください。
伝統的なドロップキャップのレイアウトを実現するために、UAはベースラインの揃えなどでフォントサイズを調整しても構いません。また、グリフのアウトラインをレイアウト時に考慮しても構いません。
このセクションは意図的に空白です。(以前は ::selection
疑似要素を定義していました。)
::before および ::after 疑似要素は、要素内容の前後に生成される内容を記述するために使用できます。詳細は CSS 2.1 [CSS21] を参照してください。
::first-letter
や ::first-line
疑似要素が ::before
や ::after
で生成された内容を持つ要素に適用された場合、生成内容も含めて最初の文字・最初の行に適用されます。
著者は、ある要素が文書ツリー内の別の要素の子孫である場合(例:"H1要素内に含まれるEM要素")についてセレクターで記述したい場合があります。子孫コンビネーターはこの関係を表します。子孫コンビネーターは2つの単純セレクター並びを区切る 空白です。"A B" という形のセレクターは、祖先要素Aの任意の子孫である要素Bを表します。
例:
例えば、次のセレクター:
h1 em
これは、H1要素の子孫である EM 要素を表します。次のフラグメントの部分的な説明として、正しく有効ですが完全ではありません:
<h1>This <span class="myclass">headline is <em>very</em> important</span></h1>
次のセレクター:
div * p
これは、DIV要素の孫(またはそれ以降の子孫)となるP要素を表します。*の前後の空白は全称セレクターの一部ではなく、DIVが祖先で、何かの要素を介してPの祖先となる必要があることを示すコンビネーターです。
次のセレクターは、子孫コンビネーターと 属性セレクター を組み合わせており、(1) href属性を持つ要素、(2) div内のp内にある要素を表します:
div p *[href]
子コンビネーターは、2つの要素間の親子関係を表します。子コンビネーターは「大なり記号」(U+003E,
>
)で、2つの単純セレクター並びを区切ります。
例:
次のセレクターは、body要素の子であるp要素を表します:
body > p
次の例は、子孫コンビネーターと子コンビネーターを組み合わせています。
div ol>li p
これは、li要素の子孫であるp要素を表します。li要素はol要素の子であり、ol要素はdiv要素の子孫です。「>」コンビネーターの前後にある空白は省略されています。
要素の最初の子を選択する方法については、:first-child
疑似クラスのセクションを参照してください。
兄弟コンビネーターには「次兄弟コンビネーター」と「後続兄弟コンビネーター」の2種類があります。どちらの場合も、隣接判定の際に非要素ノード(例:要素間のテキスト)は無視されます。
隣接兄弟コンビネーターは「プラス記号」(U+002B,
+
)で、2つの単純セレクター並びを区切ります。2つの並びが表す要素は同じ親を持ち、1つ目の並びが表す要素が2つ目の並びが表す要素の直前に位置します。
例:
次のセレクターは、math要素の直後に現れるp要素を表します:
math + p
次のセレクターは、先ほどの例に属性セレクターを加えたものです。h1要素は class="opener" を持っている必要があります:
h1.opener + h2
後続兄弟コンビネーターは「チルダ」(U+007E,
~
)で、2つの単純セレクター並びを区切ります。2つの並びが表す要素は同じ親を持ち、1つ目の並びが表す要素が2つ目の並びが表す要素の前に(必ずしも直前でなくてよい)存在します。
例:
h1 ~ pre
これは、h1要素の後に現れるpre要素を表します。次のフラグメントの部分的な説明として、正しく有効ですが完全ではありません:
<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>
セレクターの詳細度(specificity)は次のように計算します:
否定疑似クラス内のセレクターも他と同様に数えますが、否定自体は疑似クラスとして数えません。
この3つの値 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
属性で指定されたスタイルの詳細度についてはCSS 2.1で記述されています。
[CSS21]。
以下の文法はセレクターの構文を定義します。全体としてLL(1)、局所的にLL(2)です(ただし多くのUAは直接この文法を使うべきではありません。パース規約を表すものではないため)。生成式のフォーマットは人間が読みやすいよう最適化されており、Yaccを超える簡略記法も一部使われています([YACC]参照):
生成式は以下の通りです:
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 ;
以下は トークナイザー(Flex [FLEX] 記法)。トークナイザーは大文字小文字を区別しません。
2箇所の "\377" はFlexの現行バージョンが扱える最大文字番号(10進255)を表します。これは"\4177777"(10進1114111)、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; \/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* コメントは無視 */ . return *yytext;
Selectorsを利用する各仕様は、許可および除外するSelectorsの部分集合を定義し、その部分集合の全構成要素のローカルな意味を記述しなければなりません。
非規範的な例:
セレクタープロファイル | |
---|---|
仕様 | CSS レベル1 |
許可 | 型セレクター クラスセレクター IDセレクター :link, :visited, :active 疑似クラス 子孫コンビネーター ::first-line, ::first-letter 疑似要素 |
除外 |
全称セレクター 名前空間 |
追加制約 | 単純セレクター並びごとにクラスセレクターは1つだけ許可 |
セレクタープロファイル | |
---|---|
仕様 | CSS レベル2 |
許可 | 型セレクター 全称セレクター 属性存在・値セレクター クラスセレクター IDセレクター :link, :visited, :active, :hover, :focus, :lang(), :first-child 疑似クラス 子孫コンビネーター 子コンビネーター 隣接兄弟コンビネーター ::first-line, ::first-letter 疑似要素 ::before, ::after 疑似要素 |
除外 |
部分文字列一致属性セレクター 名前空間 |
追加制約 | 単純セレクター並びごとに複数のクラスセレクター(CSS1制約)も許可 |
CSSでは、セレクターはパターンマッチ規則を表現し、どのスタイル規則が文書ツリー内の要素に適用されるか決定します。
次のセレクター(CSSレベル2)は、セクション1の見出しh1
内に属性name
を持つすべてのアンカーa
に一致します:
h1 a[name]
このようなセレクターに付与されたすべてのCSS宣言は、一致した要素に適用されます。
セレクタープロファイル | |
---|---|
仕様 | STTS 3 |
許可 |
型セレクター 名前空間 |
除外 | 非対応疑似クラス 疑似要素 |
追加制約 | STTS宣言の右辺フラグメント記述では一部セレクターやコンビネーターは許可されない |
STTS 3でセレクターは2通りの使い方ができます:
このセクションは本仕様への適合性のみを定義します。
ユーザーエージェントが、特定のデバイスの制限によって本仕様の一部を実装できない場合(例:非インタラクティブなユーザーエージェントは、インタラクティブ性がないため動的疑似クラスを実装しない可能性が高い)、これにより非適合となるわけではありません。
Selectorsを再利用するすべての仕様は、受け入れるSelectorsのサブセットまたは除外するサブセットを記載したプロファイルを含み、現仕様に追加する制約について記述しなければなりません。
不正(invalid)はパースエラーによって発生します。例えば、認識できないトークンや、その時点で許可されていないトークンなどです。
ユーザーエージェントはパースエラーの扱いについて下記の規則を守らなければなりません:
Selectorsを再利用する仕様は、パースエラーの扱い方を定義しなければなりません。(CSSの場合、セレクターが使われているルール全体が破棄されます。)
本仕様には、ユーザーエージェントが仕様への基本的な適合性を確認できるテストスイートがあります。このテストスイートは網羅的であることを意図していませんし、Selectorsのすべての組み合わせケースをカバーするものではありません。
CSSワーキンググループは、長年にわたり本仕様にコメントを寄せてくださったすべての方々に感謝いたします。
特に、最終編集レビューを行ってくださったDonna McManus、Justin Baker、Joel Sklar、Molly Ives Browerの皆様に特別な感謝を申し上げます。また、Adam Kuehn、Boris Zbarsky、David Perrell、Elliotte Harold、Matthew Raymond、Ruud Steltenpool、Patrick Garies、Anton Prowse、そしてW3C国際化ワーキンググループの皆様にも、最終コメントと温かい言葉をいただき感謝いたします。
前回の勧告以降の主な変更点は以下の通りです: