CSSでは、パターンマッチング規則によって、文書ツリー内の要素に適用されるスタイル規則が決定されます。
これらのパターンはセレクターと呼ばれ、
単純な要素名から複雑な文脈的パターンまで多岐にわたります。
パターン内のすべての条件が特定の要素に対して真である場合、そのセレクターはその要素に一致します。
セレクター内の文書言語の要素名の大文字小文字の区別は文書言語に依存します。
例えば、HTMLでは要素名は大文字小文字を区別しませんが、XMLでは区別します。
次の表にCSS 2.2のセレクター構文をまとめます：
| パターン
| 意味
| 説明されているセクション
|
| *
| 任意の要素に一致します。
| 汎用セレクター
|
| E
| 任意のE要素（つまり、タイプEの要素）に一致します。
| 型セレクター
|
| E F
| E要素の子孫である任意のF要素に一致します。
| 子孫セレクター
|
| E > F
| E要素の子である任意のF要素に一致します。
| 子セレクター
|
| E:first-child
| Eが親の最初の子要素である場合に一致します。
| :first-child 疑似クラス
|
E:link
E:visited
| ハイパーリンクのソースアンカーであるE要素が、まだ訪問されていない場合(:link)、
またはすでに訪問済みである場合(:visited)に一致します。
| リンク疑似クラス
|
E:active
E:hover
E:focus
| 特定のユーザー操作中にEに一致します。
| 動的疑似クラス
|
| E:lang(c)
| タイプEの要素が（文書言語が定義する方法で決定された）言語cの場合に一致します。
| :lang() 疑似クラス
|
| E + F
| 兄弟要素Eの直後にある任意のF要素に一致します。
| 隣接セレクター
|
| E[foo]
| "foo"属性が設定されている任意のE要素に一致します（値に関係なく）。
| 属性セレクター
|
| E[foo="warning"]
| "foo"属性値が正確に"warning"と等しい任意のE要素に一致します。
| 属性セレクター
|
| E[foo~="warning"]
| "foo"属性値がスペースで区切られた値のリストであり、その中に正確に"warning"と等しい値が含まれる任意のE要素に一致します。
| 属性セレクター
|
| E[lang|="en"]
| "lang"属性がハイフンで区切られた値のリストで、
左から始まる値が"en"である任意のE要素に一致します。
| 属性セレクター
|
| DIV.warning
| 言語固有。（HTMLでは、DIV[class~="warning"]と同じです。）
| クラスセレクター
|
| E#myid
| IDが"myid"と等しい任意のE要素に一致します。
| IDセレクター
|
単純セレクターは、
型セレクターまたは汎用セレクターに続けて、
任意の順序で0個以上の属性セレクター、IDセレクター、
または疑似クラスが続くものです。
単純セレクターは、そのすべての構成要素が一致する場合に一致します。
注記：CSS 2.2で使用されている用語は、CSS3で使用されているものとは異なります。
例えば、「単純セレクター」は、CSS 2.2ではCSS3よりもセレクターの小さな部分を指します。
CSS3セレクターモジュールを参照してください [CSS3SEL]。
セレクターは、
コンビネーターで区切られた1つ以上の単純セレクターの連鎖です。
コンビネーターには、
空白、">"、"+"があります。
コンビネーターとその周囲の単純セレクターの間に空白を入れることができます。
セレクターと一致する文書ツリーの要素を
対象と呼びます。
単一の単純セレクターからなるセレクターは、その要件を満たす任意の要素に一致します。
単純セレクターとコンビネーターをチェーンに追加することで追加の一致制約が課されるため、
セレクターの対象は常に最後の単純セレクターと一致する要素の部分集合です。
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は、
複数宣言や
略記プロパティ
など、他の「略記」メカニズムも提供します。
汎用セレクターは、"*"と記述され、
任意の要素型の名前に一致します。これは、文書ツリー内の任意の1つの要素に一致します。
汎用セレクターが単純セレクターの唯一の構成要素ではない場合、"*"を省略することができます。例えば：
*[lang=fr] と [lang=fr] は同等です。
*.warning と .warning は同等です。
*#myid と #myid は同等です。
型セレクターは、
文書言語の要素型の名前に一致します。型セレクターは、文書ツリー内のその要素型のすべてのインスタンスに一致します。
例：
次の規則は、文書ツリー内のすべてのH1要素に一致します：
h1 { font-family: sans-serif }
時には、文書ツリー内の別の要素の子孫である要素に一致するセレクターを著者が作成したい場合があります
（例：「H1要素内に含まれるEM要素に一致させる」）。
子孫セレクターは、
パターン内でこのような関係を表現します。
子孫セレクターは、空白で区切られた2つ以上のセレクターで構成されます。
"A B"形式の子孫セレクターは、祖先要素Aの任意の子孫である要素Bに一致します。
例：
例えば、次の規則を考えてみましょう：
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) P内にあり、そのPがDIV内にある任意の要素に一致します：
div p *[href]
子セレクターは、
ある要素が別の要素の子である場合に一致します。
子セレクターは、">"で区切られた2つ以上のセレクターで構成されます。
例：
次の規則は、BODYの子であるすべてのP要素のスタイルを設定します：
body > P { line-height: 1.3 }
例：
次の例は、子孫セレクターと子セレクターを組み合わせたものです：
div ol>li p
これは、LIの子孫であるP要素に一致します。
LI要素はOL要素の子でなければならず、OL要素はDIVの子孫でなければなりません。
">"コンビネーターの周囲の空白は省略されています。
要素の最初の子を選択する方法については、以下の:first-child疑似クラスのセクションを参照してください。
隣接兄弟セレクターは次の構文を持ちます：E1 + E2。
E2はセレクターの対象です。このセレクターは、E1とE2が文書ツリー内で同じ親を共有し、
E1がE2の直前にある場合に一致します。
非要素ノード（テキストノードやコメントなど）は無視されます。
例：
したがって、次の規則は、MATH要素の直後にP要素がある場合、インデントをなくすことを示します：
math + p { text-indent: 0 }
次の例では、H1の直後に続くH2間の垂直スペースを減らします：
h1 + h2 { margin-top: -5mm }
例：
次の規則は、前の例の規則と似ていますが、クラスセレクターを追加しています。
したがって、特別なフォーマットはH1がclass="opener"を持つ場合にのみ発生します：
h1.opener + h2 { margin-top: -5mm }
CSS 2.2では、ソース文書内で特定の属性が定義されている要素に一致する規則を著者が指定することができます。
属性セレクターは次の4つの方法で一致する可能性があります：
[att]
- 要素が"att"属性を設定している場合に一致します。属性の値に関係なく一致します。
[att=val]
- 要素の"att"属性値が正確に"val"である場合に一致します。
[att~=val]
att属性の値がスペースで区切られた単語のリストであり、その中に正確に"val"が含まれる要素を表します。
"val"にスペースが含まれている場合、それは何も表しません（単語はスペースで区切られているため）。
また、"val"が空文字列の場合も何も表しません。
[att|=val]
att属性を持つ要素を表し、その値が正確に"val"であるか、"val"に続けてすぐに"-"（U+002D）が続く場合に一致します。
これは主に、BCP 47（[BCP47]）
またはその後継で説明されているように、言語サブコード
の一致を可能にすることを目的としています。lang（またはxml:lang）の言語サブコードの一致については、
:lang疑似クラスを参照してください。
属性値は識別子または文字列でなければなりません。
セレクター内の属性名と値の大文字小文字の区別は文書言語に依存します。
例：
例えば、次の属性セレクターは、
"title"属性を指定しているすべてのH1要素に一致します（値に関係なく）：
h1[title] { color: blue; }
例：
次の例では、セレクターは"クラス"属性が正確に"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 }
一致は文書ツリー内の属性値に基づいて行われます。
デフォルト属性値はDTDやその他の場所で定義される場合がありますが、
属性セレクターによって常に選択できるわけではありません。
スタイルシートは、デフォルト値が文書ツリーに含まれていない場合でも機能するように設計されるべきです。
より正確には、UAはDTDの"外部部分集合"を読み取ることができる場合がありますが、
必ずしもそうする必要はありません。ただし、文書の"内部部分集合"内のデフォルト属性値を探す必要があります。
（これらの部分集合の定義については[XML11]
を参照してください）。
UAによっては、DTDの外部部分集合で定義されたデフォルト属性値が文書ツリーに表示されるかどうかが異なる場合があります。
XML名前空間を認識するUA（[XMLNAMESPACES]
を参照）は、その名前空間に関する知識を使用して、デフォルト属性値を文書内に存在するかのように扱うことができますが、
必ずしもその必要はありません。（例：XHTML UAは、XHTML DTDに関する組み込みの知識を使用する必要はありません）。
注記：通常、実装は外部部分集合を無視することを選択します。
例：
例えば、"notation"という属性を持つEXAMPLE要素があり、
そのデフォルト値が"decimal"であるとします。DTDフラグメントは次のようになる可能性があります：
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
スタイルシートに次の規則が含まれている場合：
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
最初の規則は、"notation"属性がデフォルトで設定されている要素（つまり、明示的に設定されていない要素）には一致しない可能性があります。
すべての場合をキャッチするには、デフォルト値の属性セレクターを削除する必要があります：
EXAMPLE { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
ここで、セレクターEXAMPLE[notation=octal]は型セレクター単独よりも
特異性が高いため、
"notation"属性値が"octal"である要素に対しては、2番目の規則のスタイル宣言が最初の規則のそれをオーバーライドします。
デフォルトケースにのみ適用されるプロパティ宣言が、非デフォルトケースのスタイル規則でオーバーライドされるように注意を払う必要があります。
HTMLを使用する場合、著者はclass属性を表現する際に~=記法の代わりにピリオド（.）記法を使用できます。
したがって、HTMLではdiv.valueとdiv[class~=value]は同じ意味を持ちます。
属性値はピリオド（.）の直後に続かなければなりません。
UAは、該当する名前空間の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属性を通じてスタイル情報を割り当てることが考えられます。
ただし、文書言語の構造的要素には一般的に認識され、受け入れられた意味がありますが、著者定義のクラスにはそれがない可能性があるため、このような実践は避けるべきです。
注意： 要素に複数のクラス属性がある場合、その値はクラスを検索する前にスペースで区切られて連結されなければなりません。
現時点では、この状況に達する方法は知られていないため、この動作は本仕様では明示的に規範的ではありません。
文書言語には、ID型として宣言されている属性を含む場合があります。
ID型の属性が特別である理由は、同じ値を持つ属性が2つ存在できないことです。
どの文書言語であれ、ID属性はその要素を一意に識別するために使用されます。
HTMLでは、すべてのID属性は"id"という名前を持ちますが、XMLアプリケーションでは異なる名前を持つ場合がありますが、
同じ制限が適用されます。
文書言語のID属性を使用すると、著者は文書ツリー内の1つの要素インスタンスに識別子を割り当てることができます。
CSSのIDセレクターは、識別子に基づいて要素インスタンスに一致します。
CSSのIDセレクターは、"#"に続けて識別子であるID値を記述します。
注意：CSSは、UAが要素のID属性をどのように認識するかを指定していません。
UAは、例えば文書の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>
しかし、次の例では、スタイル規則はID値が"z98y"である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.1 [XML11]では、どの属性が要素のIDを含むかに関する情報はDTDに含まれています。
XMLをパースする際、UAは必ずしもDTDを読み取るわけではないため、要素のIDが何であるかを認識できない場合があります。
スタイルシート設計者がこれが起こる可能性を知っている、または疑っている場合は、
#p371の代わりに通常の属性セレクターを使用するべきです：[name=p371]。
ただし、通常の属性セレクターのカスケード順序はIDセレクターとは異なります。
そのため、宣言に!important優先順位を追加する必要がある場合があります：
[name=p371] {color: red !important}。
要素に複数のID属性がある場合、IDセレクターの目的上、それらすべてがその要素のIDとして扱われなければなりません。
このような状況は、xml:id [XMLID]、
DOM3 Core [DOM-LEVEL-3-CORE]、
XML DTDs [XML11]
および名前空間固有の知識を組み合わせて到達する可能性があります。
CSS 2.2では、スタイルは通常文書ツリー内の要素の位置に基づいて適用されます。
この単純なモデルは多くの場合に十分ですが、文書ツリーの構造のために、
一部の一般的な出版シナリオが実現できない場合があります。
例えば、HTML 4（[HTML4]）では、
段落の最初の行を参照する要素がなく、そのため単純なCSSセレクターではそれを参照することができません。
CSSは、疑似要素と
疑似クラスの概念を導入し、
文書ツリーの外部にある情報に基づいてフォーマットを可能にします。
- 疑似要素は、文書言語で指定されているものを超えて文書ツリーに関する抽象化を作成します。
例えば、文書言語では、要素の内容の最初の文字や最初の行にアクセスするためのメカニズムを提供していません。
CSS疑似要素を使用することで、スタイルシート設計者は通常アクセスできない情報を参照できます。
また、疑似要素は、ソース文書に存在しないコンテンツにスタイルを割り当てる方法も提供します（例：
:before と :after疑似要素は生成されたコンテンツにアクセスできます）。
- 疑似クラスは、名前、属性、または内容以外の特性に基づいて要素を分類します。
基本的には、文書ツリーから推測できない特性です。
疑似クラスは動的である場合があります。つまり、ユーザーが文書と対話する際に要素が疑似クラスを取得または失う可能性があります。
例外として、':first-child'は文書ツリーから推測でき、
':lang()'も場合によっては文書ツリーから推測可能です。
疑似要素も疑似クラスも、文書ソースや文書ツリーには現れません。
疑似クラスはセレクター内のどこにでも使用できますが、疑似要素はセレクターの最後の単純セレクターの後にのみ追加できます。
疑似要素と疑似クラスの名前は大文字小文字を区別しません。
一部の疑似クラスは相互排他的ですが、他のものは同じ要素に同時に適用することができます。
競合する規則がある場合は、通常のカスケードの順序が結果を決定します。
: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 /* 同じ */
ユーザーエージェントは通常、未訪問のリンクと既訪問のリンクを異なる方法で表示します。
CSSは、これらを区別するために疑似クラス':link'と':visited'を提供します：
- :link 疑似クラスは、まだ訪問されていないリンクに適用されます。
- :visited 疑似クラスは、ユーザーがリンクを訪問した後に適用されます。
UAは、訪問済みリンクを（未訪問の）':link'状態に戻す場合があります。
これら2つの状態は相互排他的です。
文書言語は、どの要素がハイパーリンクのソースアンカーであるかを決定します。
例えば、HTML4では、リンク疑似クラスは"href"属性を持つA要素に適用されます。
したがって、次の2つのCSS 2.2宣言は同様の効果を持ちます：
a:link { color: red }
:link { color: red }
例：
次のリンクが：
<A class="external" href="http://out.side/">external link</A>
訪問済みの場合、この規則：
a.external:visited { color: blue }
は、そのリンクを青色にします。
注意：スタイルシートの著者がユーザーの同意なしに、ユーザーが訪問したサイトを特定するために
:link と :visited 疑似クラスを悪用する可能性があります。
そのため、UAはすべてのリンクを未訪問リンクとして扱うか、
訪問済みリンクと未訪問リンクを異なる方法でレンダリングする際にユーザーのプライバシーを保護するための他の対策を実装する場合があります。
プライバシーの取り扱いに関する詳細は[P3P]を参照してください。
インタラクティブなユーザーエージェントは、ユーザーの操作に応じてレンダリングを変更することがあります。
CSSは、一般的なケースのために3つの疑似クラスを提供します：
- :hover 疑似クラスは、ユーザーが要素を指定している間（ポインティングデバイスを使用して）適用されますが、
要素をアクティブ化しません。例えば、ビジュアルユーザーエージェントは、要素によって生成されたボックス上に
カーソル（マウスポインター）が存在する場合にこの疑似クラスを適用できます。
インタラクティブメディアをサポートしていない
ユーザーエージェントは、この疑似クラスをサポートする必要はありません。
インタラクティブメディアをサポートする適合ユーザーエージェントの中には、
この疑似クラスをサポートできない場合があります（例：ペンデバイス）。
- :active 疑似クラスは、ユーザーによって要素がアクティブ化されている間に適用されます。
例えば、ユーザーがマウスボタンを押してから離すまでの間。
- :focus 疑似クラスは、要素がフォーカスを持っている間（キーボードイベントや他の形式のテキスト入力を受け付ける場合）に適用されます。
要素は同時に複数の疑似クラスに一致することがあります。
CSSは、上記の状態にある要素や状態への移行方法を定義していません。
スクリプトは、要素がユーザーイベントに反応するかどうかを変更することができ、
デバイスやユーザーエージェントによって、要素を指し示したりアクティブ化したりする方法が異なる場合があります。
CSS 2.2は、':active'または':hover'状態にある要素の親がその状態にあるかどうかを定義していません。
ユーザーエージェントは、疑似クラス遷移によって現在表示されている文書を再フローする必要はありません。
例えば、スタイルシートが':active'リンクの'font-size'が非アクティブのリンクよりも大きくなるように指定している場合、
リンクを選択したときに文字が位置を変える可能性があるため、UAは対応するスタイル規則を無視することがあります。
例：
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'疑似クラスはリンクにのみ適用されていました。
文書言語が要素の人間の言語を
どのように決定するかを指定している場合、CSSセレクターでその言語に基づいて要素に一致させることができます。
例えば、HTML [HTML4]では、
言語は"lang"属性、META要素、およびプロトコル（HTTPヘッダーなど）からの情報の組み合わせによって決定されます。
XMLはxml:langという属性を使用しており、他の文書言語固有の方法で言語を決定する場合もあります。
疑似クラス':lang(C)'は、その要素が言語Cにある場合に一致します。
一致するかどうかは、要素の言語値がCと等しいか、またはCがその言語値のハイフンで区切られた部分文字列であるかに基づきます。
これは'|='演算子による場合と同様です。
Cと要素の言語値の一致は、ASCII範囲内の文字について大文字小文字を区別せずに実行されます。
Cは有効な言語名である必要はありません。
Cは空であってはなりません。
注意：文書とプロトコルは、BCP 47 [BCP47]またはその後継からのコードを使用して言語を示し、
XMLベースの文書の場合は"xml:lang"属性を使用することを推奨します。
詳細は「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の例では、[lang|=fr]に一致するのはBODYのみですが（LANG属性を持っているため）、
:lang(fr)にはBODYとPの両方が一致します（どちらもフランス語であるため）。
<body lang=fr>
<p>Je suis Français.</p>
</body>
疑似要素は、以下および他の場所で説明される例外を除き、
CSSにおいて実際の要素と同様に機能します。
以下のセクションは、すべてのケースにおける':first-line'および':first-letter'の正確なレンダリングを定義するものではありません。
将来のCSSのレベルでは、これらがより正確に定義される可能性があります。
: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.
ユーザーエージェントによって、: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の最初の行は、Pの最初の行です（PとDIVがどちらもブロックレベルであると仮定）。
表セルまたはインラインブロックの最初の行は、祖先要素の最初の書式設定された行にはなり得ません。
したがって、<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>では、DIVの最初の書式設定された行は「Hello」ではありません。
注：次の断片のPの最初の行：
<p><br>First...は文字を含んでいません（HTML 4のBRのデフォルトスタイルを仮定）。
「First」という単語は最初の書式設定された行には含まれません。
:first-line疑似要素の架空の開始タグは、最も内側の囲むブロックレベル要素のすぐ内側にネストされているように振る舞うべきです。
（CSS1およびCSS2ではこのケースについて明確にされていなかったため、著者はこの動作に依存するべきではありません）。
以下はその例です。次のHTML断片用の架空のタグシーケンスは：
<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疑似要素に適用されます：
フォントプロパティ、カラー
プロパティ、背景プロパティ、
単語間隔、
文字間隔、
テキスト装飾、
文字変換、
および行の高さ。
UAは他のプロパティを適用する場合もあります。
:first-letter擬似要素は、ブロックの最初の行の最初の文字を選択しなければなりません。この文字がその行で他のコンテンツ（画像やインラインテーブルなど）に先行されていない場合です。:first-letter擬似要素は、「イニシャルキャップ」や「ドロップキャップ」といった一般的なタイポグラフィ効果のために使用できます。この種の最初の文字は、'float'プロパティが'none'の場合、インラインレベル要素に似ています。それ以外の場合は、フロートされた要素に似ています。
:first-letter擬似要素に適用されるプロパティは次のとおりです：
フォントプロパティ,
'text-decoration',
'text-transform',
'letter-spacing',
'word-spacing'（適切な場合）,
'line-height',
'float',
'vertical-align'（'float'が'none'の場合のみ）,
マージンプロパティ,
パディングプロパティ,
ボーダープロパティ,
カラー プロパティ,
背景プロパティ.
ユーザーエージェント（UA）は他のプロパティを適用することもできます。タイポグラフィ的に正しいドロップキャップやイニシャルキャップの描画を可能にするために、UAは通常の要素とは異なり、文字の形状に基づいて行の高さ、幅、および高さを選択することができます。CSS3では:first-letterに特化したプロパティが期待されています。
この例は、イニシャルキャップの可能なレンダリングを示しています。'line-height'が:first-letter擬似要素に継承される値は1.1ですが、この例のUAでは最初の文字の高さを異なる方法で計算しているため、最初の2行間に不要なスペースができないようにしています。また、最初の文字の仮想開始タグがSPAN内にあるため、最初の文字のフォントウェイトはSPANのように太字ではなく、通常です：
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.2は、ドロップキャップの最初の文字を約2行分に広げる例です:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>ドロップキャップの最初の文字</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>
この例は次のようにフォーマットされる場合があります:
仮想タグシーケンスは以下の通りです:
<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擬似要素の開始タグはブロック要素の開始タグのすぐ後に挿入されます。
伝統的なドロップキャップのフォーマットを実現するために、ユーザーエージェントはベースラインを揃えるためにフォントサイズを近似する場合があります。また、フォーマット時にグリフのアウトラインが考慮される場合もあります。
句読点（すなわち、Unicodeで定義された[UNICODE]の"open" (Ps)、"close" (Pe)、"initial" (Pi)、"final" (Pf)、および"other"
(Po)句読点クラスに属する文字）は、最初の文字の前後にあれば含める必要があります。例:
':first-letter'は、最初の文字が実際に数字である場合にも適用されます。例："67 million dollars is a lot of money."の"6"。
:first-letter擬似要素はブロックコンテナ要素に適用されます。
:first-letter擬似要素は、テキストを含む要素、または同じフローでテキストを含む子孫を持つ要素すべてに使用できます。UAは、最初の文字の擬似要素の仮想開始タグが要素の最初のテキストの直前にあるかのように振る舞うべきです。その最初のテキストが子孫内にある場合でも。
例:
以下は例です。この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'はマーカーの後の主要ボックス内の最初の文字に適用されます。UAは'list-style-position:
inside'を持つリスト項目に対する':first-letter'を無視する場合があります。要素に':before'または':after'コンテンツがある場合、':first-letter'はそのコンテンツを含む要素の最初の文字に適用されます。
例えば、ルール 'p:before {content: "Note: "}' の後、セレクター 'p:first-letter' は "Note" の"N"に一致します。
一部の言語には特定の文字の組み合わせを処理する特別なルールがある場合があります。例えば、オランダ語では、単語の先頭に"ij"という文字の組み合わせが現れる場合、両方の文字が:first-letter擬似要素内に含まれるべきです。
最初の文字を形成する文字が同じ要素内にない場合（例えば、"'T"が<p>'<em>T...にある場合）、UAは1つの要素、両方の要素、または単に擬似要素を作成しない場合があります。
同様に、ブロックの最初の文字が行の先頭にない場合（双方向の並べ替えが原因など）、UAは擬似要素を作成する必要はありません。
例:
次の例は、重なり合う擬似要素がどのように相互作用するかを示しています。各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に設定されている場合は上書きされます。
':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" がゴールドでレンダリングされます。
