5 選択子

5.1 パタン一致化

CSSでは，パタン一致化規則は，どのスタイル規則が文書ツリーの要素に適用されるかを決定する。これらパタンは，選択子と呼ばれるが，単純な要素名から豊富な文脈パタンにまで範囲が及んでよい。ある要素に対してパタンの条件がすべて真となる場合，その選択子は，その要素と一致する。

選択子の文書言語要素名が大文字と小文字とを区別するかどうかは，文書言語に依存する。例えば，HTMLでは，要素名は大文字と小文字とを区別しないが，XMLでは大文字と小文字とを区別する。

次の表は，CSS2選択子の構文を要約している。

5.2 選択子構文

単純選択子とは，型選択子又ははん(汎)用選択子のいずれかの直後に，ゼロ個以上の属性選択子，ID 選択子又は擬似クラスが順不同で続くものとする。単純選択子は，その構成要素がすべて一致する場合に，一致する。

選択子とは，結合子で区切られた一つ以上の単純選択子の連鎖とする。結合子とは，空白，">"及び"+"とする。空白は，結合子とその周囲の単純選択子との間に現われてもよい。

選択子と一致する文書ツリーの要素を，選択子の主体 と呼ぶ。単一の単純選択子から構成される選択子は，その要件を満たすあらゆる要素に一致する。連鎖に単純選択子及び結合子を前付けすることによって，付加的な一致化制約が与えられ，それによって, 選択子の主体は，常に，最右の単純選択子に一致する要素の部分集合となる。

一つの擬似要素を，連鎖の最後の単純選択子に追加してもよい。その場合，スタイル情報は，各主体の下位部分に適用される。

5.2.1 グループ化

いくつかの選択子が同じ宣言を共有する場合，それらを，コンマで区切られたリストにグループ化してもよい。

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

H1, H2, H3 { font-family: sans-serif }

CSSは，複数の宣言及び簡略記述特性を含む他の"簡略記述"機構も提供する。

5.3 はん(汎)用選択子

"*"と書かれるはん(汎)用選択子は，あらゆる要素型の名前と一致する。はん(汎)用選択子は，文書ツリーにおけるあらゆる単一要素と一致する。

はん(汎)用選択子が単純選択子の唯一の構成要素ではない場合，"*"は省略してもよい。その例を次に示す。

• *[LANG=fr]と[LANG=fr]とは同じとする。
• *.warningと.warningとは同じとする。
• *#myidと#myidとは同じとする。

5.4 型選択子

型選択子は，文書言語要素型の名前と一致する。型選択子は，文書ツリーの要素型のあらゆるインスタンスに一致する。

H1 { font-family: sans-serif }

5.5 子孫選択子

文書作成者が，選択子を文書ツリーにおける他の要素の子孫である要素と一致させたいと考える場合もある。例えば，"H1要素が含むEM要素に一致させる"などである。子孫選択子は，パタンのそれらの関係を表現する。子孫選択子は，空白で区切られた二つ以上の選択子から構成される。形式"A B"の子孫選択子は，要素Bがある先祖要素Aの任意の子孫である場合に，一致する。

H1 { color: red }
EM { color: red }

<H1>This headline is <EM>very</EM> important</H1>

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

DIV * P 

DIV P *[href]

5.6 子選択子

子選択子は，要素がある要素の子である場合に一致する。子要素Aは，">"で区切られる二つ以上の選択子から構成される。

BODY > P { line-height: 1.3 }

DIV OL>LI P

要素の最初の子の選択に関する情報については，以降の:first-child擬似クラスを参照のこと。

5.7 隣接兄弟選択子

隣接兄弟選択子は，E1 + E2という構文をもつ。ここで，E2を選択子の主体とする。E1及びE2が文書ツリーにおいて同じ親を共有し，E1の直後にE2がくる場合に，この選択子は一致する。

文脈によっては，隣接ボックス間の上下方向のマージンをつぶすなど，隣接要素が，自動的に表示が処理されるフォーマット化オブジェクトを生成することもある。"+"選択子によって，文書作成者は，隣接要素に付加的なスタイルを指定できる。

MATH + P { text-indent: 0 } 

H1 + H2 { margin-top: -5mm }   

H1.opener + H2 { margin-top: -5mm }   

5.8 属性選択子

CSS2によって，文書作成者は，ソース文書で定義される属性と一致する規則を指定することができる。

5.8.1 属性及び属性値の一致化

属性選択子は，次の四つの方法で一致してよい。

[att]

要素が"att"属性を設定する場合に一致する。ただし，その属性値は問わない。

[att=val]

要素の"att"属性値が，ちょうど"val"となる場合に一致する。

[att˜=val]

要素の"att"属性値が，スペースで区切られた"語"のリストであって，そのうちの一つがちょうど"val"となる場合に一致する。この選択子が使用される場合，値における語は，スペースを含んではならない。これは，語がスペースで区切られることによる。

[att|=val]

要素の"att"属性値がハイフンで区切られた "単語"のリストであり， "val"で始まる場合に一致する。 一致は常に属性値の冒頭で始まる。これは，主に，. HTMLの"lang"属性など，言語サブコードの一致を許容することを意図している。 言語サブコード+の一致については，RFC 1766([RFC1766])に 記述されている。

属性値は識別子又は文字列でなければならない。選択子の属性名及び属性値が 大文字及び小文字を区別するかどうかは，文書言語に依存する。

H1[title] { color: blue; }

SPAN[class=example] { color: blue; }

複数の属性選択子は，要素のいくつかの属性を参照するために, 又は同じ属性が 何度現われるかを参照するために使用できる。

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

A[rel˜="copyright"]
A[href="http://www.w3.org/"]

*[LANG=fr] { display : none }

*[LANG|="en"] { color : red }

DIALOGUE[character=romeo] 
     { voice-family: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 DTDにおけるデフォルトの属性値

一致化は，文書ツリーの属性値に関して生じる。HTML以外の文書言語に対しては，デフォルト属性値がDTD又はその他の場所で定義されてもよい。スタイルシートは，デフォルト値が文書ツリーに含まれていなくとも動作するように設計されていることが望ましい。

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

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }

EXAMPLE { /*... default property settings ...*/ }

5.8.3 クラス選択子

HTMLで使用されるスタイルシートについては，"class"属性の一致化の 際に，文書作成者は "˜=" 表記法の代わりにドット(.)表記法を使用 してよい。従って，HTMLの場合， "DIV.value" 及び"DIV[class~=value]"の意味は同じである。 "."の直後に属性値を続けること。

*.pastoral { color: green }  /* all elements with class~=pastoral */

.pastoral { color: green }  /* all elements with class~=pastoral */

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

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

"class"値の部分集合と一致するため，各値の前に"."を配置しなければならない。ただ し, 順は問わない。

 
P.pastoral.marine { color: green }

5.9 ID 選択子

文書言語は型IDであると宣言される属性を包含してよい。型IDの属性を特別に するということは，そういった二つの属性が同じ値を有することができないという ことである。どのような文書言語であっても，ID属性は要素を一意に識別するため 使用できる。HTMLでは，ID属性はすべて"id"と命名される。XMLアプリケーション では，ID属性の命名は異なるが，同じ制限が適用される。

文書言語のID属性により，文書作成者は，文書ツリーのある要素インスタンスに識別子 を割り当てることができる。CSS ID選択子はその識別子に基づいて要素インスタンス を一致させる。CSS ID選択子は，直後にID値が続く"#"を包含する。

H1#chapter1 { text-align: center }

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID選択子は属性選択子よりも優先順位が高い。例えば，HTMLでは， 選択子#p123は， 段階に関しては， [ID=p123]よりも固有である。

5.10 擬似要素 及び 擬似クラス

CSS2では, スタイルは，通常，文書ツリーの位 置に基づいて要素に添付される。単純なモデルで十分であることが多いが， 文書ツリーの構造によっては，一般にシナリオを 公開できない場合もある。例えば，HTML4.0 ([HTML40]参照)では, 段落の最初の行を表す要素はないため， それを表す単純なCSS選択子もない。

CSSは擬似要素及び 擬似クラスの概念を導入し， 文書ツリーの外部に存在する情報に基づくフォーマット化を可能にしている。

• 擬似要素は，文書言語が指定する抽象化を超えて, 文書ツリーに関する抽象化 を生成する。例えば，文書言語は，要素の内容の最初の文字又は最初の行をアクセス する機構を提供しない。CSS擬似要素により，スタイルシート設計者は， このアクセスできない情報を参照することができる。擬似要素により，スタイルシート設 計者は，ソース文書に存在しない内容をスタイルに割り当てることもできる 例えば，:before 及び :after 擬似要素は生成される内容へのアクセスを提供する。
• 擬似クラスは，名前，属性又は内容以外の特徴に基づいて要素を分類する。 その特徴は文書ツリーから推測できない重要なものである。擬似クラスは，利用者が 文書と対話する間，要素が擬似クラスを獲得するか又は喪失するという点で， 動的であってもよい。 ':first-child'は例外であり，文書ツリー から推測 できる。

擬似要素も擬似クラスも文書ソース又は文書ツリーには現われない。

擬似クラスは，擬似要素が選択子の 主体の後に現われる場合に限り，選択子のどの場所でも 現われることができる。

擬似要素及び擬似クラス名は，大文字と小文字とを区別しない。

相互に排他的な擬似クラスもあれば，同時に同じ要素に適用できる擬似クラスもある。 規則が競合する場合は，標準的な 段階順 が結果を決定する。

適合する利用者エージェントは 選択子の:first-line又は:first-letterに関する規則をすべて無視するか，又は，代わりにこれらの 擬似要素上の特性の部分集合をサポートしてよい。

5.11 擬似クラス

5.11.1 :first-child 擬似クラス

:first-child 擬似クラスは， ある他の要素の最初の子である要素と一致する。

DIV > P:first-child { text-indent: 0 }

<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

P:first-child EM { font-weight : bold }

匿名ボックスは 文書ツリーの一部ではないため，最初の子を算出する際にカウントされない点に 注意すること。

<P>abc <EM>default</EM> 

次の二つの選択子は等しい。

* > A:first-child   /* A is first child of any element */
A:first-child       /* Same */

5.11.2 リンク擬似クラス(:link 及び :visited)

利用者エージェントは，一般に，以前に訪問されたリンクとは異なる未訪問リンクを 表示する。CSSは擬似クラス ':link' 及び':visited'を提供して，それらを区別する。

• :link擬似クラスはまだ訪問されていないリンクに適用される。
• :visited 擬似クラスは，一旦利用者がリンクを訪問すると適用される。

備考 かなりの時間が経過した後， 利用者エージェントは訪問リンクを未訪問の ':link' 状態に戻すことを選択してよい。

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

文書言語は，どの要素がハイパリンクソースアンカであるかを決定する。例えば， HTML 4.0では, リンク擬似クラスは "href" 属性を有するA要素に適用される。従って. 次の二つのCSS2宣言には類似の効果 がある。

A:link { color: red }
:link  { color: red }

<A class="external" href="http://out.side/">external link</A>

A.external:visited { color: blue }

5.11.3 動的擬似クラス(:hover, :active, 及 び:focus)

対話式の利用者エージェントは，利用者の動作に反応して，レンダリングを 変更する場合がある。CSSは，共通の事例について，三つの擬似クラスを提供する。

• :hover擬似クラスは，利用者があるポインティング装置を用いて要素を指定 する場合に適用されるが，要素を活性化しない。例えば，視覚利用者エージェントは， カーソル(マウスポインタ)が要素によって生成されるボックスの上で停止する場合に， この擬似クラスを適用できる。 対話式メディアをサポート しない利用者エージェントは，この擬似クラスをサポートする必要はない。 適合する利用者エージェントが 対話式メディアをサポートする 場合は，この擬似クラスをサポートすることはできない。(ペン装置など)
• :active 擬似クラスは，利用者が要素を活性化している間に，適用される。 要素を活性化している間とは，例えば，利用者がマウスボタンを押している時間と，ボタ ンを離している時間との間の時間である。
• :focus擬似クラスは，要素がフォーカスを有する間，即ち，キーボードイベント 又はその他のテキスト入力のフォームを許容する間に，適用される。

これらの擬似クラスは，相互に排他的ではない。要素は同時に複数の 擬似クラスを一致させる。

CSSは，どの要素が上位の状態にあるか，又は状態がどのように入力され，放置される かを定義しない。スクリプトは要素が利用者イベントに再動作するかどうかを変更し， 様々な装置及びUAが要素に位置指定したり，又は要素を活性化する方法は 数多く存在する。

利用者エージェントは，擬似クラス遷移により，現在表示されている文書を 再フローすることは要求されない。例えば，スタイルシートは，:activeリンクの 'font-size' が非活性リンクの'font-size' よりも大きいことが望ましいことを指定するが，読者がリンクを選択する場合， 文字の位置が変更されるため，UAは対応するスタイル規則を無視してもよい。

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

A:focus { background: yellow }
A:focus:hover { background: white }

フォーカス輪郭線のプレゼンテーションについては，動的なフォーカス輪郭線のセクションを参照のこと。

5.11.4 言語擬似クラス(:lang)

文書言語が，要素の人が話す言語がどのように決定されるかを指定する 場合，その言語に基づき要素を一致するCSSの選択子を書込むことが可能である。 例えば，[HTML40]では, 言語は, "lang"属性，META要素及び/又はHTTPヘッダのようなプロトコルか らの情報の組み合せで決定される。 XMLは，XML:LANGと呼ばれる属性を使用し，言語決定には 他の文書言語固有の方法が存在する。

擬似クラス':lang(C)'は，要素が言語Cにある場合に，一致する。ここでのCは 言語符号であり， HTML 4.0 [HTML40] 及び RFC 1766 [RFC1766]で指定されている。それは '|=' operatorに対する方法と同じ方法で一致化される。

HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '» ' ' «' }
:lang(de) > Q { quotes: '«' '»' '\2039' '\203A' }

5.12 擬似要素

5.12.1 :first-line 擬似要素

:first-line 擬似要素は特別なスタイルを段落のフォーマットされる最初の行に 適用する。その例を次に示す。

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

上の規則は，"すべての段落の最初の行の文字を大文字に変換する"という意味である。 しかし，選択子"P:first-line"は実際のHTML要素のどれにも一致しない。 この選択子は， 適合する利用者エージェントが すべての段落の冒頭で挿入する擬似要素に一致する。

最初の行の長さは，ページの幅，フォントサイズなど，多くの要因に依存する点に 注意すること。従って，通常の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.

<P><P:first-line> This is a somewhat long HTML 
paragraph that will </P:first-line> 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>

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

:first-line 擬似要素はブロックレベル要素だけに添付できる。

:first-line擬似要素は行内レベル要素に類似しているが， 一定の制限がある。 :first-line 擬似要素:に適用されるのは フォント特性, 色特性, 背景特性, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 及び 'clear'に限られる。

5.12.2 :first- letter 擬似要素

:first-letter 擬似要素は，一般的な表示上の効果である "initial caps"及び "drop caps" に使用される。 'float'特性が'none'である場合，この種の 最初の文字は，行内レベル要素に類似する。そうでない場合は，浮動要素に類似する。

:first-letter擬似要素に適用される特性を次に列挙する。 フォント特性 , 色特性, 背景特性, 'text-decoration', 'vertical-align' (ただし，only if 'float' が 'none'の場合だけ), 'text-transform', 'line-height', マージン特性 埋込み特性, 境界特性, 'float', 'text-shadow', 及び 'clear'。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</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>

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

伝統的なドロップキャップフォーマット化を実現するために，利用者エージェントは フォントサイズを，下線寄りに近づけてもよい。同様に，フォーマット化の際， グリフ輪郭線を考慮してもよい。

最初の文字に優先する句読点 (Unicode [UNICODE]で定義 される，"open" (Ps), "close" (Pe), 及び "other" (Po) 句読点クラスの文字)が含むことが望ましいが，その例を次に示す。

:first-letter 擬似要素が一致するのは， ブロックレベル要素の一部に限られる。

ある文字連結の処理方法について，固有の規則をもつ言語もある。例えば，オランダ語で は，"ij"という文字の連結が単語の冒頭に現われる場合，両文字とも :first-letter 擬似 要素内部にあると考えるほうがよい。

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>

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

5.12.3 :before 疑似要素及び :after 擬似要素

':before'及び ':after' 擬似要素は，生成される内容を要素の内容の前後に挿入する ために使用できる。それらは生成テキストで説明されてい る。

H1:before {content: counter(chapno, upper-roman) ". "}

:first-letter擬似要素及び :first-line擬似要素と :before及び :afterとを組み 合わせたものは，挿入テキストを包含する要素の最初の文字又は行に適用される。

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}