5 セレクタ

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

5.1 パターンマッチ

CSSにおいて、パターンマッチ規則は文書ツリー内のどの要素にスタイル規則を適用するかを決定する。セレクタと呼ばれるこれらのパターンは、単純な要素名から豊富な文脈上のパターンへと多岐にわたる。パターン内のすべての条件が特定の要素に対して該当する場合、セレクタは要素にマッチする

セレクタについて文書言語の要素名における大文字・小文字の区別は、文書言語に依存する。たとえば、HTMLで要素名は大文字・小文字不区別であるが、XMLにおいては大文字・小文字区別となる。

次の表はCSS 2.1セレクタ構文の概要である:

パターン意味解説する節
*すべての要素にマッチする。全称セレクタ
EE要素にマッチする(すなわち、E要素型)。型セレクタ
E FE要素の子孫であるF要素にマッチする。子孫セレクタ
E > FE要素の子であるF要素にマッチする。子セレクタ
E:first-child親要素の最初の子であるE要素にマッチする。 :first-child疑似クラス
E:link
E:visited
ハイパーリンクのアンカーであるE要素のうち、未訪問(:link)であるもの、訪問済み(:visited)であるものにマッチする。 リンク疑似クラス
E:active
E:hover
E:focus
特定のユーザーアクション状態にあるE要素にマッチする。 動的疑似クラス
E:lang(c) 言語cを持つE要素にマッチする(言語情報の決定方法は文書言語が規定する)。 :lang()疑似クラス
E + FE要素の直後に現れるF要素にマッチする。隣接セレクタ
E[foo](値にかかわらず)"foo"属性を設定されたE要素にマッチする。 属性セレクタ
E[foo="warning"]"foo"属性の値が"warning"であるE要素にマッチする。 属性セレクタ
E[foo~="warning"]"foo"属性が空白区切りの値をとり、その値の1つが"warning"であるE要素にマッチする。 属性セレクタ
E[lang|="en"]"lang"属性が"en"で(左から)始まるハイフン区切りのリストをもつE要素にマッチする。 属性セレクタ
DIV.warning言語固有。(HTMLでは、DIV[class~="warning"]と同義。) クラスセレクタ
E#myid"myid"と同値のIDをもつE要素にマッチする。IDセレクタ

5.2 セレクタの構文

単体セレクタは、型セレクタまたは全称セレクタのいずれかの直後に、0個以上の属性セレクタIDセレクタ疑似クラスが任意の順序で続くものである。セレクタの構成要素のすべてがマッチする場合、単体セレクタはマッチする。

注:CSS 2.1で使用される用語は、CSS3で使用されているものとは異なる。たとえば、"単体セレクタ"は、CSS 2.1と比較してCSS3でより小さいセレクタ部分を指す。CSS3セレクタモジュール[CSS3SEL]を参照のこと。

セレクタは、結合子で区切られた1つ以上の単体セレクタからなる。結合子は、空白、">"、"+"がある。空白は結合子と単体セレクタの間およびその前後に出現してもよい。

セレクタにマッチする文書ツリーの要素は、セレクタの対象と呼ばれる。単一の単体セレクタから成るセレクタは、その要件を満たすすべての要素にマッチする。単体セレクタおよび結合子を列の先頭に追加することは、追加のマッチング制約を課すことになる。よってセレクタの対象は、常に最後の単体セレクタに一致する要素のサブセットである。

単一の疑似要素は、連鎖の最後の単純セレクタに追加してもよい。その場合、スタイル情報は各対象の一部に適用される。

5.2.1 グループ化

複数のセレクタが同じ宣言を共有する場合、セレクタをコンマ区切りのリストにグループ化してもよい。

例:

この例において、同一の宣言を持つ3つの規則を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 全称セレクタ

"*"と書き表される全称セレクタは、すべての要素型の名前とマッチする。全称セレクタは、文書ツリー内の任意の単一要素にマッチする。

全称セレクタが単体セレクタの唯一の構成要素でない場合、"*"を省略してもよい。たとえば:

5.4 型セレクタ

型セレクタは、文書言語の要素型の名前とマッチする。型セレクタは、文書ツリー内の要素型の全インスタンスとマッチする。

例:

次の規則は、文書ツリー内のすべてのH1要素とマッチする。

h1 { font-family: sans-serif }

5.5 子孫セレクタ

ときには、著者はセレクタが文書ツリー内の別の要素の子孫である要素とマッチさせたいこともあってもよい(たとえば、H1要素に含まれるEM要素にマッチさせる)。子孫セレクタは、パターン内のそのような関係を表現する。子孫セレクタは、空白で区切られた2つ以上のセレクタで構成される。形式"A B"の子孫セレクタは、要素Bが、ある祖先要素Aの任意の子孫である場合にマッチする。

例:

たとえば、次の規則を考えてみる:

h1 { color: red }
em { color: red }

この規則の意図するところは、文字色の変更によってテキストを強調することだが、次のような場合にその効果は失われる。

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

この場合、どこかのH1内にEMが出現する際にいつでも文字色を青に設定する規則を、以前の規則に補完することによって対処する:

h1 { color: red }
em { color: red }
h1 em { color: blue }

3番目の規則は以下の断片で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]

5.6 子セレクタ

要素がある要素のである場合、子セレクタはマッチする。子セレクタは">"で区切られた2つ以上のセレクタで構成される。

例:

次の規則は、BODYの子であるすべてのP要素にスタイルを設定する:

body > P { line-height: 1.3 }

例:

次の例は、子孫セレクタと子セレクタを組み合わせている:

div ol>li p

このセレクタはLIの子孫であるP要素にマッチする。LI要素はOL要素の子でなければならず、OL要素はDIVの子孫でなければならない。">"結合子の前後の空白が省略されていることに注意する。

ある要素における最初の子のセレクタに関する詳細は、:first-child疑似クラスの節を参照のこと。

5.7 隣接兄弟セレクタ

隣接兄弟セレクタはE1 + E2の構文を持つ。この場合E2がセレクタの主体である。E1とE2が文書ツリーで同じ親を共有し、かつE1の直後にE2が続く場合、非要素ノード(テキストノードやコメントなど)を無視してセレクタはマッチする。

例:

したがって、次の規則は、P要素がMATH要素の直後に続く場合、P要素をインデントすべきでないことを提示している:

math + p { text-indent: 0 } 

次の例は、H1とその直後に続くH2の間にある垂直方向のスペースを削減する:

h1 + h2 { margin-top: -5mm }   

例:

次の規則は、クラスセレクタが追加されたことを除けば、上の例と同様である。したがって、H1がclass="opener"を持つ場合に限り、特別な整形効果が現れる:

h1.opener + h2 { margin-top: -5mm }   

5.8 属性セレクタ

CSS 2.1は、著者がソース文書で定義されたある属性を持つ要素にマッチする規則を指定できる。

5.8.1 属性および属性値のマッチング

属性セレクタは、4つの方法でマッチしてもよい:

[att]
要素の"att"属性が任意の値を設定する場合にマッチする。
[att=val]
要素の"att"属性値が厳密に"val"である場合にマッチする。
[att~=val]
空白区切りのリストで、そのうちの1つの単語が厳密に"val"であるようなatt属性値を持つ要素を意味する。"val"が空白に相当する場合、(単語が空白区切りなので)何かを意味することは決してない。"val"が空の文字列の場合、いずれも意味するものではない。
[att|=val]
値が厳密に"val"または"val"で始まり直後に"-"(U+002D)が続くいずれかのatt属性を持つ要素を意味する。これは、主にBCP 47([BCP47])またはその後継で説明されるような言語のサブコードとマッチすることを意図している(たとえば、HTMLのa要素におけるhreflang属性)。lang(あるいはxml:lang)の言語のサブコードのマッチについては、:lang疑似クラスを参照のこと。

属性値は、識別子または文字列でなければならない。セレクタの属性名と属性値について、大文字・小文字区別は文書言語に依存する。

例:

たとえば、以下の属性セレクタは、値にかかわらず"title"属性を指定するすべてのH1要素とマッチする:

h1[title] { color: blue; }

例:

次の例で、セレクタは、"class"属性が厳密に値"example"を持つすべてのSPAN要素にマッチする:

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

複合的な属性セレクタは、ある要素の複数の属性、または同一属性の複数回の参照できる。

例:

ここでセレクタは、"hello"属性が厳密に値"Cleveland"を持ち、"goodbye"属性が厳密に値 "Columbus"を持つすべてのSPAN要素にマッチする:

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

例:

以下のセレクタは"="と"~="の違いを示している。たとえば、最初のセレクタは、"rel"属性の値"copyright copyleft copyeditor"とマッチする。2つめのセレクタは、"href"属性が値"http://www.w3.org/"を持つ場合のみマッチする。

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

例:

次の規則は、"lang"属性値が"fr"(フランス語)となっているすべての要素を非表示にする。

*[lang=fr] { display : none }

例:

次の規則は、"lang"属性値が"en"で始まるものにマッチする。これは、"en"、"en-US"、"en-cockney"などを含む:

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

例:

同様に、次の聴覚スタイルシートの規則は、セリフを各役割ごとに異なる声で読み上げさせる:

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

5.8.2 DTDにおける属性の規定値

マッチングは、文書ツリーの属性値に対して行われる。デフォルトの属性値はDTDまたは他の場所で定義されてもよいが、常に属性セレクタを選択できるとは限らない。スタイルシートは、デフォルト値が文書ツリーに含まれない場合でも動作するように設計されるべきである。

より正確には、ユーザーエージェントは、DTDの"外部サブセット"を読んで、文書中にデフォルト属性値を検索することを要求されなくてよいが、文書の"内部サブセット"においては要求されてもよい(これらのサブセットの定義については、[XML10]を参照のこと)。DTDの外部サブセットで定義されるデフォルトの属性値が文書ツリーに出現するかどうかは、ユーザーエージェントに依存する。

ユーザーエージェントはXML名前空間[XMLNAMESPACES]を認識してもよいが、名前空間が文書に存在したかどうかにかかわらず、デフォルトの属性値を扱うために名前空間の知識を要求されない。(たとえば、XHTMLユーザーエージェントは、XHTMLのDTDの組み込み知識の使用を要求されない。)

一般に、実装は外部サブセットの無視を選択することに注意する。

例:

Example:

たとえば、デフォルト値"decimal"である属性"notation"を持つ要素の例を考える。DTD断片はこのようになる

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

スタイルシートが次の規則を含むとすると

EXAMPLE[notation=decimal] { /*... 規定のプロパティ設定 ...*/ }
EXAMPLE[notation=octal]   { /*... 別の設定 ...*/ }

最初の規則は、その"notation"属性がデフォルトで設定されている要素とマッチしない場合がある。すなわち、明示的に設定されていないことがある。すべての場合を捕らえるには、デフォルト値の属性セレクタを削除しなければならない:

EXAMPLE                   { /*... 規定のプロパティ設定 ...*/ }
EXAMPLE[notation=octal]   { /*... 別の設定 ...*/ }

ここで、セレクタEXAMPLE[notation=octal]が単独の型セレクタよりも詳細であるので、2番目の規則におけるスタイル宣言は、"notation"の属性値"octal"を持つ要素が最初のものを上書きする。デフォルトの場合のみに適用される任意のプロパティの宣言は、非デフォルトの場合のスタイル規則で上書きされることに配慮する必要がある。

5.8.3 クラスセレクタ

HTMLと連携する場合、著者はclass属性を表す場合~=表記の代わりにピリオド(.)を使用してもよい。したがって、HTMLに対して、div.valuediv[class~=value]は同じ意味を持つ。属性値は、"ピリオド"(.)の直後に続かなければならない。ユーザーエージェントは、それぞれの名前空間の"class"属性を決定するための名前空間固有の知識を持つ場合、XML文書にピリオド(.)表記を用いてセレクタを適用してもよい。名前空間固有の知識の一例は、特定の名前空間の仕様における文である(たとえば、SVG 1.1[SVG11]SVG"class"属性およびユーザーエージェントが属性をどのように解釈すべきかを説明する。同様にMathML 3.0[MATH30]MathML"class"属性を説明する)。

例:

たとえば、以下のように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要素は緑色となる:

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

"class"値のサブセットをマッチングさせるには、"."の直後にそれぞれの値が存在しなければならない。

例:

たとえば、以下の規則は、"class"属性がスペース区切りのリストに"pastoral"と"marine"を含んだすべてのP要素とマッチする:

 
p.marine.pastoral { color: green }

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

注。 CSSは、"class"属性に非常に大きな力を与える。したがって著者は、ほとんど見栄えに関係しない要素(HTMLにおけるDIVやSPANなど)のスタイル情報に基づき、"class"属性を使用して割り当てた独自の"文書言語"を設計することができる。著者は、文書言語の構造要素が意味を認識し受け入れていることが多いので、このような用法を避けるべきである。著者が定義したクラス名は認識されないかもしれない。

注:要素が複数のクラス属性を持つ場合、クラスを検索する前にクラス値の間をスペースで連結されなければならない。しかし、執筆時点でワーキンググループはこの状況に到達する可能なすべての方法を認識していないため、本仕様においてこの動作は明確に非規範的である。

5.9 IDセレクタ

文書言語は、ID型と宣言される属性を含んでもよい。ID型属性の特殊さは、2つの属性が同値を持つことができないことにある。どのような文書言語でも、ID属性は一意に要素を識別するために使用できる。HTMLですべてのID属性は"id"と名付けられる。XMLアプリケーションは、異なるID属性に名前を付けてもよいが、同じ制約が適用される。

文書言語のID属性は、文書ツリー内の1つの要素インスタンスに識別子を割り当て可能である。CSS IDセレクタは、その識別子に基づいて要素のインスタンスにマッチする。CSS IDセレクタは、"#"の直後にID値が続く識別子でなければならない。

CSSはユーザーエージェントが要素のID属性を識別する方法を規定しないことに注意する。たとえば、ユーザーエージェントは文書のDTDを読むかもしれないし、決め打ちされた情報を持つかもしれないし、ユーザーに尋ねるかもしれない。

例:

以下のIDセレクタは、ID属性値"chapter1"であるH1要素とマッチする。

h1#chapter1 { text-align: center }

次の例でスタイル規則は、ID値"z98y"を持つ要素にマッチする。よって規則は、P要素に対してマッチする:

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

しかし、次の例でスタイル規則は、"z98y"のID値を持つH1要素とマッチする。規則は、この例でP要素とマッチしない。

<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]より詳細である。

注。XML 1.0[XML10]において、どの属性が要素のIDを含むかに関する情報は、DTDに含まれる。XMLを解析する際、ユーザーエージェントは常にDTDを読むとは限らないため、どの要素のIDであるかを識別できないかもしれない。スタイルシートの設計者がこのような場合になると知っている、もしくは疑う場合、#p371の代わりに[name=p371]のような通常の属性セレクタを使用すべきである。しかし、通常の属性セレクタのカスケード順序は、IDセレクタとは異なる。[name=p371] {color: red ! important} のように、宣言に"!important"プロパティを追加する必要があるかもしれない。

要素が複数のID属性を持つ場合、ID属性のすべては、IDセレクタのために、その要素のIDとして扱われなければならない。このような状況は、xml:id [XMLID]、DOM3 Core [DOM-LEVEL-3-CORE]、XML DTD [XML10]と名前空間固有の知識の混合物を使用して達せられるだろう。

5.10 疑似要素疑似クラス

CSS 2.1において、スタイルは通常、文書ツリー内の位置に基づいて要素に配置される。この単純なモデルは、多くの場合十分だが、一部の一般的な公開シナリオは、文書ツリーの構造に起因しない場合がある。たとえば、HTML 4([HTML4]を参照)において、段落の最初の行を参照する要素は存在せず、したがってその行を参照してもよい単体CSSセレクタは存在しない。

CSSは、文書ツリーの外側にある情報に基づいた書式設定を可能にするために、疑似要素疑似クラスの概念を導入する。

疑似要素も疑似クラスのいずれも文書ソースまたは文書ツリーに出現しない。

疑似クラスは、セレクタ内のどこにでも許可されるが、疑似要素はセレクタの最後の単体セレクタの後にのみ追加してもよい。

疑似要素および疑似クラスの名前は、大文字・小文字不区別である。

一部の疑似クラスは相互に排他的である一方、同じ要素に同時に適用可能なものもある。規則が競合する場合、通常のカスケード順序が結果を決定する。

5.11 疑似クラス

5.11.1 :first-child疑似クラス

:first-child疑似クラスは、ある別の要素における最初の子要素にマッチする。

例:

次の例において、セレクタはDIV要素の最初の子であるすべてのP要素にマッチする。規則は、DIVの第一段落のインデントを禁止する。

div > p:first-child { text-indent: 0 }
このセレクタは、以下の断片でDIV中のPにマッチする:
<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>
しかし、以下の断片で2つめのPにはマッチしない:
<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

例:

次の規則は、P要素の子孫であって最初の子であるEM要素に対して'bold'にフォントの太さを設定する:

p:first-child em { font-weight : bold }

匿名ボックスは、文書ツリーの一部ではないので、最初の子を数えるときに匿名ボックスがカウントされないことに注意する。

たとえば、EMについて:

<P>abc <EM>default</EM> 
これは、Pの最初の子である。

次の2つのセレクタは等価である:

* > a:first-child   /* A要素は任意の要素の最初の子 */
a:first-child       /* 上に同じ */

5.11.2 リンク疑似クラス:link:visited

ユーザーエージェントは一般に、未訪問のリンクと訪問済みのリンクを区別して表示する。CSSは、これらを区別するために疑似クラス':link'および':visited'を提供する:

ユーザーエージェントは、ある時点で訪問済みリンクを(未訪問の)':link'状態に戻してもよい。

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

どの要素がハイパーリンクのソースアンカーかについては、文書言語が決定する。たとえば、HTML4において、リンク疑似クラスは"href"属性を持つA要素に適用される。したがって、次の2つのCSS 2.1の宣言は、同様の効果がある:

a:link { color: red }
:link  { color: red }

例:

次のリンクの場合:

<A class="external" href="http://out.side/">external link</A>
訪問済みの場合、この規則は:
a.external:visited { color: blue }
青色にする。

注。スタイルシート著者は、ユーザーの同意なしにユーザーの訪問済みサイトを決定するために:linkおよび:visited疑似クラスを悪用することが可能である。

したがって、ユーザーエージェントは、未訪問のリンクなどのすべてのリンクを扱う一方で、訪問済みまたは未訪問のリンクを異なるものとしてレンダリングし、ユーザのプライバシーを保護する他の手段を実装してもよい。プライバシーの取り扱いの詳細については[P3P]を参照のこと。

5.11.3 動的疑似クラス::hover:active:focus

対話的なユーザーエージェントは、時にはユーザーの動作に応じてレンダリングを変更する。CSSは、一般的な場合の3つの疑似クラスを提供する:

要素は複数の疑似クラスと同時にマッチしてもよい。

CSSは、どの要素が上記の状態にあってもよいか、どのように状態が入力または出力されるかを定義しない。スクリプトは、要素がユーザーイベントに反応するかどうかを変更してもよく、異なるデバイスやユーザーエージェントは要素を指示したり、アクティブにするさまざまな方法があってもよい。

':active'または':hover'である要素の親がその状態になっているかどうかもCSS 2.1は定義しない。

ユーザーエージェントは、疑似クラスの遷移のために現在表示されている文書のリフローを要求しない。たとえば、スタイルシートは、非アクティブなリンクよりもアクティブなリンクの'font-size'を大きくするよう指定してもよいが、これは読者がリンクを選択する際の文字の位置を変更してもよいため、ユーザーエージェントは対応するスタイル規則を無視してもよい。

例:

A:link    { color: red }    /* 未訪問のリンク */
A:visited { color: blue }   /* 訪問済みリンク */
A:hover   { color: yellow } /* ユーザーがマウスポインタを重ねている */
A:active  { color: lime }   /* アクティブなリンク */

A:hoverはA:linkとA:visitedの後に配置しなければならないことに注意する。そうでなければカスケーディング規則がA:hover規則の'color'プロパティを無効にしてしまうことになる。同様に、A:activeはA:hoverの後に配置されるため、A要素上でアクティブとホバーのどちらの場合でもアクティブ色(ライム色)が適用される。

例:

動的疑似クラスを組み合わた例:

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

最後のセレクタは、:focus疑似クラスかつ:hover疑似クラスであるA要素とマッチする。

フォーカスアウトラインの表示については、動的なフォーカスアウトラインの節を参照のこと。

注。 CSS1において、':active'疑似クラスは、':link'および':visited'と相互に排他的であった。これはもはや当てはまらない。要素は、':visited'と':active'(または':link'と':active')の両方になることができ、スタイル宣言が適用されるかどうかを通常のカスケード規則が決定する。

注。 また、CSS1において':active'疑似クラスはリンクにのみ適用されることに注意する。

5.11.4 言語疑似クラス::lang

文書言語が要素の自然言語を決定する方法を指定する場合、その言語に基づく要素とマッチするようなCSSのセレクタを記述可能である。たとえば、HTML[HTML4]で、"lang"属性、META要素、ことによると(HTTPヘッダのような)プロトコルからの情報の組み合わせで言語は決定される。XMLは、xml:langと呼ばれる属性を使用し、言語を決定するための他の文書の言語固有の方法があってもよい。

疑似クラス':lang(C)'は言語Cの要素が存在すればマッチする。単に識別子のCに対して要素の言語の値と等しい場合でも、ハイフン区切りの部分文字列でも、あたかも'|='演算子によって実行されたかのように同じ方法でマッチする。要素の言語の値に対するCのマッチングは、ASCIIの範囲内の文字において大文字・小文字不区別で行われる。識別子Cは妥当な言語名である必要はない。

Cは空であってはならない。

注:文書やプロトコルは、BCP 47 [BCP47]またはその後続由来のコードを用いて言語を指示することが推奨される。また、XMLベースの文書の場合は"xml:lang"属性による言語の指示が推奨される[XML10] "FAQ: Two-letter or three-letter language codes."を参照のこと。

例:

次の規則は、カナダにおけるフランス語またはドイツ語のいずれかのHTML文書に対して引用符を設定する:

html:lang(fr-ca) { quotes: '� ' ' �' }
html:lang(de) { quotes: '�' '�' '\2039' '\203A' }
:lang(fr) > Q { quotes: '� ' ' �' }
:lang(de) > Q { quotes: '�' '�' '\2039' '\203A' }

2番目の規則のペアは、実際には親要素の言語に従ってQ要素に'quotes'プロパティを設定する。一般に引用符の選択は、引用文自身ではなく、引用文の周囲にある要素の言語に基づくため、このような方法がとられる。英文中のフランス語の断片"à L' improviste"は英語の引用符を使用するのである。

[lang|=xx]と:lang(xx)の違いに注意する。このHTMLの例において、BODYのみ[lang|=fr]にマッチする(LANG属性を持つため)。しかし、BODYとPの両方が:lang(fr)にマッチする(両方ともフランス語のため)。

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

5.12 疑似要素

疑似要素は、以下と別の章で説明する例外を除き、CSSにおいて実際の要素のように振る舞う。

以下の節では、すべての場合における":first-line"や':first-letter'の正確なレンダリングを定義しないことに注意する。将来のCSSレベルは、これらをより正確に定義するかもしれない。

5.12.1 :first-line疑似要素

:first-line疑似要素は、段落の1行目に整形されるコンテンツに特別なスタイルを適用する。たとえば:

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

上記の規則は、"全段落の1行目の文字を大文字に変更する"ことを意味する。しかし、セレクタ"P:first-line"は実在するどのHTML要素ともマッチしない。このセレクタは、適合ユーザーエージェントが全段落の先頭に挿入する疑似要素とマッチする。

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.

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

:first-line疑似要素は、ブロックコンテナ要素にのみ付属可能である。

要素の"最初に整形される行"は、同じフローでブロックレベルの子孫の内部に出現してもよい(すなわち、配置もフロートもされていない、ブロックレベルの子孫)。たとえば、<DIV><P>This line...</P></DIV>のDIVの1行目は、Pの1行目である(PとDIVの両方がブロックレベルであると仮定)。

テーブルセルまたはインラインブロックの最初の行は、最初に整形された祖先要素の行にすることはできない。したがって、<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>において、DIVの最初に整形される行は"Hello"の行ではない。

なお、この断片のPの1行目<p><br>First...は、いずれの文字も含まないことに注意する(HTML 4におけるBRの既定のスタイルを仮定)。単語"First"は、最初に整形される行ではない。

ユーザーエージェントは、あたかも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疑似要素はインラインレベル要素に類似するが、一定の制限がある。:first-line疑似要素に適用されるプロパティは次のとおり:フォントプロパティ色のプロパティ背景のプロパティ'word-spacing''letter-spacing''text-decoration''text-transform''line-height'。ユーザーエージェントは、他のプロパティを同様に適用してもよい。

5.12.2 :first-letter疑似要素

ある行に他のコンテンツ(画像やインラインテーブルなど)が先行しない場合、:first-letter疑似要素は、ブロックの1行目の最初の文字を選択しなければならない。:first-letter疑似要素は、一般的な印刷効果である"イニシャルキャップ"および"ドロップキャップ"として使用してもよい。'float'プロパティが'none'である場合、この種類の先頭文字はインラインレベル要素と、それ以外の場合はフロート要素と類似する。

次に述べるものは、:first-letter疑似要素に適用されるプロパティである:フォントプロパティ'text-decoration''text-transform''letter-spacing''word-spacing'(適切な場合)、'line-height''float''vertical-align'('float'が'none'の場合のみ)、マージンプロパティパディングプロパティボーダープロパティ色のプロパティ背景のプロパティ。ユーザーエージェントは、他のプロパティと同様に適用されてもよい。活字として正確なイニシャルキャップまたはドロップキャップをレンダリングできるようにするために、ユーザーエージェントは、通常の要素の場合とは異なった行の高さや文字の形状に基づく幅と高さを選択してもよい。CSS3は、先頭文字に適用される特定のプロパティを持つことが期待される。

この例では、イニシャルキャップの可能なレンダリングを示している。first-letter疑似要素によって継承される'line-height'は1.1であるが、この例ではユーザーエージェントが異なる先頭文字の高さを計算しているため、最初の2行の間に不要なスペースが発生しないことに注意する。また、先頭文字の仮想開始タグがSPANの内部にあるため、先頭文字のフォントの太さはnormalであり、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.

first-letter疑似要素の説明画像

次のCSS 2.1は、ドロップキャップの先頭文字の範囲を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-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

この例は次のように整形される:

:first-letterと:first-line疑似要素の組み合わせ効果を説明する画像   [D]

仮想タグは次のとおり:

<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疑似要素のタグはコンテンツ(すなわち、先頭文字)に隣接することに注意する。

伝統的なドロップキャップ整形を実現するため、たとえばベースラインを揃えるために、ユーザーエージェントはフォントサイズを近似してもよい。また、整形の際、グリフのアウトラインを考慮してもよい。

句読点(すなわち、Unicode[UNICODE]で定義されている文字、"open"(Ps)、"close"(Pe)、"initial"(Pi)、"final"(Pf)、"other"(Po)の句読点クラス)が先行または先頭文字の後に続く場合、次のように文字が含まれるべきである:

最初の文字に先行する引用符を含めべきである。   [D]

':first-letter'は先頭文字が数字である場合も適用される。たとえば、"67万ドルのお金がたくさんある。"の"6"など。

:first-letter疑似要素は、ブロックコンテナ要素に適用される。

:first-letter疑似要素は、テキストを含む、または同じフローでテキストが含まれた子孫を持つすべての要素で使用できる。ユーザーエージェントは、その最初のテキストが子孫に存在する場合でも、first-letter疑似要素の仮想開始タグが要素の最初のテキストの前にいるかのように振る舞うべきである。

例:

以下に例を示す。このHTMLの断片に対して仮想タグは:

<div>
<p>The first text.

次のようになる:

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

テーブルセルまたはインラインブロックの先頭文字は、祖先要素の先頭文字にすることはできない。したがって、<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>において、DIVの先頭文字は"H"ではない。実際、DIVは先頭文字を持たない。

先頭文字は、最初に整形される行で出現しなければならない。たとえば、この断片: <p><br>First...最初の行はいずれの文字も含まず、":first-letter"はマッチしない(HTML 4でBRの既定のスタイルを仮定)。具体的には、"First"の"F"とはマッチしない。

要素がリスト項目('display: list-item')の場合、':first-letter'は、マーカーの後の主ボックスの先頭文字に適用される。ユーザーエージェントは、'list-style-position: inside'を伴うリストの項目上の':first-letter'を無視してもよい。要素が':before'または':after'コンテンツを持つ場合、':first-letter'はそのコンテンツを含む要素の先頭文字に適用される。

たとえば、規則'p:before {content: "Note: "}'の後で、セレクタ'p:first-letter'は"Note"の"N"とマッチする。

一部の言語は、特定の文字の組み合わせを扱う方法について、特定の規則を持ってもよい。たとえば、オランダ語において、文字結合"ij"が単語の先頭に出現する場合、どちらも:first-letter疑似要素内に含まれるよう考慮されるべきである。

<p>'<em>T...における"'T"のように、同じ要素内で先頭文字を形成しないおそれのある場合、ユーザーエージェントは、要素の1つからまたは両方の要素からfirst-letter疑似要素を作成してもよいし、または単に疑似要素を作成しなくてもよい。

同様に、ブロックの先頭文字が行の先頭でない(たとえば双方向の並べ替えに起因する)場合、ユーザーエージェントは疑似要素を作成する必要はない。

例:

次の例は、疑似要素が重なった場合にどのような相互作用をもたらすかを示している。各P要素の先頭文字は、'24pt'のフォントサイズで緑色になる。最初に整形される行の残りは'青'になり、残りの段落は'赤'になる。

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に設定される場合は上書きされる。

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}

これは、"Special!"の"S"を金色にレンダリングする。