この文書では，CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ，文書ツリーの各要素に適用されるスタイル規則を決定します。
このセレクタの章を読み始める前に，まづCSS2構文の概説を通読されることを，お奨めします。
CSSではパターンマッチ（Pattern matching）の規則を用いて，文書ツリーの各要素に適用されるスタイル規則を決定します。セレクタと呼ばれるこれらのパターンは単純な要素型名のみのものから，複雑な前後関係（たとえば子供や子孫，兄弟など）を照合できるものまで多岐に亙ります。パターン内に示された全条件がある要素と一致するとき，そのセレクタと要素はマッチ（match）していると謂います。
セレクタに現れる "要素型名" や "属性名" について，それらの大文字と小文字に敏感であるかは，文書言語に依存します。たとえばHTML 4.01文書であれば一般に大文字と小文字には無頓着ですが，XML応用では区別されるので注意してください。
| パターン | 解説の節 | 意味 |
|---|---|---|
* |
全称セレクタ | あらゆる要素にマッチする。 |
E |
タイプセレクタ | Eという名称の要素にマッチする。 |
E F |
子孫セレクタ | E要素の子孫であるF要素にマッチする。 |
E > F |
子供セレクタ | E要素の子供であるF要素にマッチする。 |
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"] と同じ。（XML応用では名前空間で "class" 属性が既知と判れば利用可） |
E#myid |
IDセレクタ | 一意（ID型）属性の値が myid であるE要素にマッチする。 |
E:linkE:visited |
リンクに関する疑似クラス | 始点アンカーのリンク先が未訪問であるE要素（:link），または訪問済みであるE要素（ :visited）にマッチする。 |
E:activeE:hoverE:focus |
ダイナミック疑似クラス | ユーザから特定の働きかけを受けている間のE要素にマッチする。 |
E:first-child |
:first-child疑似クラス | 親要素内に初出する子供のそれがE要素ならマッチする。 |
E:lang(c) |
言語に関する疑似クラス | 内容が c という言語で書かれているE要素にマッチする。（言語情報をどう指定するかは文書言語に依って異る） |
要素とタグを峻別すべきです。たとえばPタグにスタイルを適用する
という具合に，"要素" と言うべき場合でも，"タグ" と云う人もいます。タグというのは文書構成の "要素" を識別させるための目印に過ぎないのであり，スタイルは要素に適用されます。
そうでなければHTML 4のソース文書において，要素の開始タグと終了タグが共に省略できる場合の説明がつきません。このような要素はたとい明確にマークアップが為されてなくとも，暗示的に存在しており，User Agentに拠って常に解析されるのです。
文書をレンダリングするUser Agentは，ソース文書内のタグづけから各要素を解析し，文書ツリーを組立てます。そしてCSSの重要な特徴であるカスケード処理と継承に基いて，文書ツリー内の各要素に適用するスタイル規則を決定します。（see 処理モデル）
〔補足終了〕
セレクタ（selector）は結合子で分けられた一つ以上の単純セレクタから構成されます。
単純（simple）セレクタとは全称セレクタまたはタイプセレクタの何れかと，その直後にゼロ個以上の属性セレクタ，クラスセレクタ，IDセレクタ，疑似クラスが任意の順序で続いたものです。これら構成条件のすべてが一致すると単純セレクタはマッチします。
結合子（combinators）には，空白類文字（子孫セレクタで用いられる），閉じ不等号:>（子供セレクタで用いられる），プラス符号:+（隣接兄弟セレクタで用いられる）があり，結合子と単純セレクタの間には自由に空白類文字を挿入して構いません。
あるセレクタとマッチする文書ツリー内の要素群を，そのセレクタの主体（subjects）と呼びます。単一の単純セレクタから成るなら，その必要条件を満たす全要素にマッチします。別の単純セレクタや結合子を連結してマッチングの条件を増やしても，その主体は常にセレクタ最後尾の単純セレクタにマッチする要素群の部分集合になります。ひとつの疑似要素はセレクタ最後の単純セレクタ末尾に連結できます。
複数のセレクタが同じ宣言を共有する場合，それらのセレクタはコンマで区切ってグループ化できます。
次に示す三つの規則集合は銘々セレクタは異りますが，等価の宣言を持っています：
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }これらの規則集合は，次のようにグループ化することで，ひとつにまとめることができます：
h1, h2, h3 { font-family: sans-serif }CSSには他の簡略表記メカニズムも提供され，それには宣言の並列および簡略表記プロパティを含みます。
全称セレクタはアスタリスクで示され，あらゆる要素型――つまり，文書ツリー内のどんな要素でもマッチします。
* { margin: 0; padding: 0; }全称セレクタが単純セレクタのただ一つの構成素ではないのなら，アスタリスクの表記を省略しても構いません。
*.warning, *#footer, *[lang|="fr"], *:lang(fr) {}
.warning, #footer, [lang|="fr"], :lang(fr) {}（補足：全称セレクタは屡々，ブラウザが持つデフォルトスタイルの初期化を意図して，スタイルシートの冒頭で用いられます。）
タイプセレクタは文書言語の要素型名――つまり，文書ツリー内のその名前である全要素とマッチします。
em { font: bold 100% Arial, sans-serif; }子孫セレクタは，ある特定要素の子孫（下位の階層）にあたる要素にマッチします。このセレクタは空白類文字で区切られた複数の単純セレクタから構成されます。たとえば A B という形の場合，Aを祖先要素とする任意のB要素にマッチします。
p em { font: italic bold 120% serif; }<p>段落要素の中身にある<em>強調</em>にマッチします。</p>body * p { line-height: normal; }子供セレクタは，ある選択対象の子供（直接の下位）にあたる要素にマッチします。このセレクタは閉じ不等号（>）で区切られた複数の単純セレクタから構成されます。たとえば A > B という形の場合，Aを直接の親とする任意のB要素にマッチします。
body > p > em { color: red; }<body>
<h1>子供セレクタ</h1>
<p>ある対象要素に内包する<em>直接の子供</em>にマッチする。</p>
<ul class="note">
<li>内包する直接の<em>子供でない</em>ならマッチしない。</li>
<li>……</li>
</ul>
</body>次例のセレクタ構文では，li要素の子孫にあるp要素にマッチされるが：
div ol > li p { line-height: 1.2; }その li は ol の子供で，更にその ol は div の子孫でなければならない。
ある要素内に初出する子供要素を選択する方法は，後述する:first-child疑似クラスで概説します。
隣接セレクタは E1 + E2 という形から構成されます； すなわち，プラス（+）で区切られた複数の単純セレクタから成る。これは E2 がセレクタの主体になり，このセレクタは E1 と E2 の親要素が同じ（すなわち兄弟）で，なおかつ E2 が E1 の直後に後続する場合（すなわち直後の弟である場合）にマッチします。これの使い道としては，ブロック間の兄弟関係に合せて垂直マージンを調整したい場合などが挙げられます。
body > h2 + p { border: dotted gray; }<body>
<h1>セレクタ</h1>
<h2>隣接兄弟セレクタ</h2>
<p>兄弟関係にある要素の弟にマッチする。</p>
<p>兄弟でも隣接しない弟にはマッチしない。</p>
<p> … </p>
</body>h1 + h2 { margin-top: -.5em; }<body>
<h1>隣接兄弟セレクタ</h1>
<h2>隣接兄弟セレクタの概要</h2>
<p> … </p>
<h2>隣接兄弟セレクタの例</h2>
<p> … </p>
</body>CSS2以降では，HTMLなどの文書言語に定められた属性にマッチさせる規則を指定できます。
これらセレクタに現れる "属性名" や "属性値" について，それらの大文字と小文字に敏感であるかは，文書言語に依存します。たとえばHTML 4.01文書であれば一般に大文字と小文字には無頓着ですが，XML応用では区別されるので注意してください。
CSS2の属性セレクタには次に提示する四種類があり，これらは単純セレクタの直後にいくつでも連結できます：
[att]ある要素に "att" 属性が設定されているなら，値がなんであれ一致します。
次では，属性値がなんであれa要素にname属性が設定されたなら，それらにマッチする：
a[name] { text-decoration: none; }複式指定の属性セレクタを用いると，要素が持つ複数の属性を参照することができる：
a[href][title] { cursor: help; }すなわち，これはhref属性とtitle属性の両者が設定された，すべてのa要素にマッチする。
[att="val"]ある要素の "att" 属性の値が "val" の通りである時に一致します。
次例の規則は，name属性の値として source が設定されているすべての要素にマッチする：
[name="source"] { font-family: monospace; }複式指定の属性セレクタを用いると，要素が持つ属性と値のペアを多数組合せて参照できる：
input[type="text"][name="source"] { font-family: monospace; }これはtype属性値が text であり，かつname属性値が source である，input要素にマッチする。
[att~="val"]ある要素の "att" 属性の値が空白区切りの "語" リストであり，そのうち一つが "val" の通りである時に一致します。
次例ではrel属性値の語リストのうち，少なくとも help という語を含んでいるa要素にマッチする：
a[rel~="help"] { cursor: help; }次の複式指定は，rel属性の語リストのうち start および help を含んでいるa要素にマッチする：
a[rel~="start"][rel~="help"] { color: red; }これは rel="help start top" の複数語にはマッチしても，rel="help" にはマッチしない。
[att|="val"]ある要素の "att" 属性の値がハイフン区切りの "語" リストであり，それが "val" で始る時に一致します。
次例は，lang属性に en や en-US などの英語系の言語コードが設定されているem要素にマッチする：
em[lang|="en"] { font: italic 100% serif; }CSS2以降では，言語情報に基いたマッチング専用のセレクタとして:lang()疑似クラスも提供されている。
HTMLまたはXHTML文書において分類をしめすclass属性とマッチングします。これは属性セレクタの~=という表記法と等価であり，その代りとしてピリオド（.）を使用します。つまりピリオドとその直後につづくクラス名から成り，その名前は次から構成されねばなりません：
HTML 4におけるclass属性では，ISO10646文字集合に含まれる任意の文字を使えるので，かなや漢字なども可です。class属性では大文字と小文字を区別するので注意してください。class属性の役割については，HTML 4.01仕様書邦訳 7.5.2を参照のこと。
class属性では同一文書中で “同じ名前” を何回でも持てます。つまり文書を通して同じ分類群を共有できます。
次例は，class属性の値として note が設定されているすべての要素にマッチする：
.note { color: red; background: #fee; }次例は，ul要素のうちclass属性の値として note を持つすべてのものにマッチする：
ul.note { color: red; background: #fee; }<ul class="note">
<li>class属性の値がnoteであるul要素にマッチ。</li>
<li>要素型毎に分類を区別したい時に有効な指定。</li>
</ul>
<p class="note">
同じクラス名の指定でも，要素型が異るとマッチしない。
</p>複数の語と同時に照合するなら，各語を任意の順序でピリオド直後に連結します：
p.note.ref { border: solid thick; }これは語リストのうち note と ref という両方の語を持っているp要素にマッチする。
class属性には，単なる装飾を目的とした名前をつけるべきではありません――たとえばredなどの如く。なぜなら "赤" から "別の色" に変更しようと考えたときに矛盾が生じてしまうからです。これでは色変更の度にマークづけもいぢる羽目になります。CSS2仕様書の設計原則で述べられているとおりスタイルシートの変更は，マークづけに殆ど影響を与えないで容易に行われるべき
という原則を遵守すべきです。
ほかにも，位置や寸法，餘白，フォント，無意味な連番など，恣意的な発想の名前（悪例：center，font9，w680px, div1, div2…）を用いるべきではありません。クラス名には普遍的な役割を想起できるような名前（良例：abstract，article，section）を用いるべきです。
CSSではclass属性が非常に大きな力を持っています。つまり文書著者は，体裁にあまり関係のない要素（div・span要素）をベースにしてそれらにクラス属性でスタイル情報を与えれば，独自の構造化言語を “疑似的に” 設計できると考えられます。しかしそれらに依存した文書設計は推奨されません。普遍的な情報共有を目指すべきHTMLの水準を低下させるからです。
そうしたクラスは著者の表現を豐かにはしますが，必ずしもその意図が適切に伝わるとは限りません。
著者が表現したい“意図や目的”に適うような要素型をHTML仕様から見出だせるなら，その意味や構造をあらわす要素（たとえばh1〜h6，p，em，strong，dfnなど）を用いるべきです。さらにそれを分類したい場合に，クラスを用いてください。
めあてに適うような要素型がどうしても見つけ出せない場合にかぎり，div・span要素で代用すべきです。そしてclass属性などの汎用属性（id, title, lang属性など）を指定して，なんらかの "補足的な情報" として役立つように設計すべきです。div要素は見出しや段落などのブロック要素をまとめるグループとして，span要素は段落内の単語やフレーズなどで用いるとよいでしょう。
文書言語は一意型に宣言された属性を持つ場合があります； たとえばHTMLなら汎用属性のid属性のこと。一意属性の特徴は，その属性をもつ要素をどうふたつ選び出しても同じ名前を持てないことであり，文書言語にかかわらず要素を一意に識別できます。
言換えれば文書著者は，同一文書において各id属性の名前が重複しないよう留意せねばなりません。
CSSの一意セレクタというのは，一意属性の識別子に基いて要素をマッチングします。このセレクタはハッシュ（#）とその直後につづく一意属性値から構成されます。HTML 4文書であればその文法に隨って，ハッシュにつづく名前は次から構成されることになります：
HTML 4におけるid属性で使える文字列は，まづa〜zA〜Zで始り，そのあとに任意の数のa〜zA〜Z，数字，ハイフン，アンダースコア，コロン，ピリオドを続けられます。またこの値は大文字と小文字を区別するので注意してください。ただし大文字と小文字が異るだけの名前は一意性に缺けるので，それらは同一文書中で共存できません。より詳細な役割については，HTML 4.01仕様書邦訳 7.5.2を参照のこと。
カスケード処理において，たとえば #foo というセレクタは，属性セレクタの [id="foo"] より優先されます。
さらにid属性はリンクの終点としても機能するので，その点にも留意しなければなりません。（see ハイパーリンク）
疑似クラス（pseudo-classes）の概念は，文書ツリーの構造外にある情報，他の単純セレクタを用いて示しきれない情報について，それらの選択を可能にします。 たとえば要素型名，属性，内容などの構造からでは導き出せない特性について分類をおこなえます。
また，ユーザの操作で要素が疑似クラスを獲得したり，消失したりするという点で，疑似クラスは動的と言えます。
疑似クラスはセレクタ内においてどこの単純セレクタにも自由に連結できますが，疑似要素についてはセレクタ最後尾にある単純セレクタの末尾に現れねばなりません。互いに排他的な疑似クラスもありますが，単一要素について同時に適用できるものもあります。
疑似クラスを持つ規則が互いに競合しあう場合には，通常のカスケード順序によって導かれた結果に従います。
User Agentは通常，未訪問のリンクか，訪問済みのリンクかに拠って――すなわち，ユーザ環境の履歴情報に基いて――ハイパーリンクのアンカーを区別して表現します。CSSではこの両者の状態を区別するために:linkおよび:visited疑似クラスが提供されています：
:link始点アンカーを生成する要素のうち，そのリンク先にまだ訪問していないものに一致します。
:visited始点アンカーを生成する要素のうち，そのリンク先にユーザが訪問済みのものに一致します。
この両者では――未訪問かつ訪問済みの状況はあり得ないので――単一要素で同時にマッチしません。
たとえばHTML 4であれば，これら疑似クラスはhref属性を持つa要素に一致します。
a:link { color: #00f; background: transparent; }
a:visited { color: #008; background: transparent; }どの要素型がアンカーであるかは文書言語で異るので，次の様にしても構いません。
:link { color: #00f; background: transparent; }
:visited { color: #008; background: transparent; }いくつかの例外はあるが、クリックできることを最大限に訴えかけるためには、テキストリンクに色をつけてアンダーラインを引くべきだ。
インタラクティヴな（対話的にユーザの操作を受けつけるメディアである）環境では，ユーザからの働きかけに応じて，しばしばレンダリングを変化させます。CSS2ではその一般的な事例として，次のような三種類の疑似クラスが提供されています：
:hover:hover疑似クラスは，ユーザの操作で要素を（マウスなどのポインティング-デヴァイスで）指し示しており，かつアクティヴではない時に適用されます。たとえば視覚系ブラウザであれば，要素に拠って生成されたボックスにカーソルを重ね合せた時に適用できます。
:active:active疑似クラスは，ユーザからの働きかけを受けてアクティヴ状態にある要素に適用されます。たとえば，マウスのボタンを押してから放すまでの間などです。あるいはキーボードからの，具体的にはEnterキーなどからの，働きかけにも反応するかもしれません。
:focus:focus疑似クラスは，ユーザの操作によりフォーカスされている要素に適用されます。（特定のキーボード操作によりフォーカスを受けているか――典型的な環境ではTabキーの操作が多い――もしくはフォームフィールドに入力できる状態の時に適用されます。）
これら疑似クラスでは，単一の要素について複数の疑似クラスと同時にマッチするかもしれません。
始点アンカーに:hover疑似クラスを設定する際には，:link と :visited の後，:activeよりも前に記述してください：
a:link { color: red; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: maroon; }この順序ではなく，たとえば a:link と a:visited よりも前に a:hover がある場合，ホヴァー時の前景色はカスケード処理に沿って後方の規則に上書きされてしまうので，結果として対象物にホヴァー状態であっても，前景色は変化しないままになります。
また，a:active より後に a:hover がある場合，マウスでアクティヴにしても前景色は変化しません。なぜかと言うと，ユーザはホヴァー状態にしてからアクティヴにするのですが，規則の順序とユーザの操作が逆転している所為でホヴァー時が優先されるのです。
次では，テキストエリアに対していくかの疑似クラスを適用させています：
textarea:focus { color: MenuText; background: Menu; }
textarea:focus:hover { color: InfoText; background: InfoBackground; }後者の規則が持つセレクタは，テキストエリアにフォーカス時（入力可能な状態）で，かつホヴァー時にマッチします。
User Agentはこれら疑似クラスの変化にともなって，現在表示している文書を再フローさせる必要はない，とされています。たとえばホヴァー時にある始点アンカーのフォントサイズを通常時より大きく設定すると，この指定はユーザ操作でアンカーを指し示した瞬間に文字列の位置がずれることが豫見されます。もしこういう状況におかれたなら，UAは再フローを避けるために対応するスタイル規則を無視するかもしれません。
先進的なウェブブラウザでは a:hover のごとくセレクタは，href属性を持たない終点アンカーにも効果を齎します。回避には a[href]:hover として絞込めばよい訣ですが，CSS1適合の旧式ブラウザでは機能しません。そこで解決案をふたつほど提案します：
ウェブブラウザにおける 'inherit' 値のサポートがあまり芳しくないので，出来るかぎり後者をお奨めします。もしくは少々煩雑になりますが，'inherit' の代りに通常時と同じ値で上書きする方法もあります。こちらも宣言が多いと重複が煩はしいので，お奨めしません。
文書言語で各要素の自然言語――日本語・英語などのように，話したり書いたり身振りなどによって表現される，人間が意志を伝達するのに用いる言語――の指定方法が決っている場合，CSS2からはその言語情報に基いたマッチングを行えます。
自然言語の情報は，HTML 4であればlang属性（XML応用であればxml:lang属性）で指定できます。これら以外にも，HTML文書のヘッダに現れるmeta要素から，もしくはHTTP応答ヘッダなどのプロトコル情報から，言語情報が特定されるかもしれません。
たとえば :lang(C) という形式の疑似クラスは，言語コードが C である要素にマッチします。
これは単に主コードだけでもマッチし，ハイフン区切りの副コードを附けても構いません。文書言語に依っては，属性セレクタの |= を用いた方法でもマッチングできます。
/* 英文では，イタリック体に強調の意味がある */
:lang(en) > em { font: italic 100% serif; }
/* 和文では，斜体は読みにくいので太字で強調 */
:lang(ja) > em { font: bold 100% sans-serif; }/* 英文引用であれば，二重引用符・単引用符を用いる */
:lang(en) > q { quotes: "\22" "\22" "'" "'" }
/* 和文引用であれば，鉤括弧・二重の鉤括弧を用いる */
:lang(ja) > q { quotes: "「" "」" "『" "』" }
:first-child疑似クラスは，ある要素内に初出する子供要素である場合にマッチします。
div > p:first-child { color: red; }<div class="example">
<p>div要素に初出する子供である，p要素にマッチする。</p>
<p>同じ兄弟でも，2つめ以降のp要素にはマッチしない。</p>
<p> … </p>
</div>* > p:first-child {} /* 段落要素は任意要素が持つ初出の子供 */
p:first-child {} /* こう書いても上述規則とまったく同じ */最初の子供を導き出すとき，CSSでは先頭のテキストノード（匿名ボックス）を子供として数えません。すなわち，最初の子供要素に先行するテキストが存在しているにしても，それと照合される訣ではありません。あくまでも最初の子供要素とマッチングを行います。
疑似要素（Pseudo-elements）では，文書言語の文書ツリーで特定される範囲を超越した，抽象的な概念を創り出します。たとえば文書言語には，要素内容の "先頭文字" あるいは "先頭行（1行目）" にアクセスするような仕組は提供されていません。CSSの疑似要素を用いるとこれらの情報にアクセスできるのです。また疑似要素は，ソース文書中に存在しない内容を生成して，スタイル設定を施すこともできます。
CSS2仕様での各疑似要素は，セレクタ最後尾にある単純セレクタの末尾にだけ連結できます。 すなわち，あるセレクタの主体にふたつ以上の疑似要素を同時に適用させたい場合，別々のセレクタに分離してその末尾に各疑似要素を連結させる必要があります。
p:first-line { color: black; font-weight: bold; }
p:first-letter { color: green; font-size: 120%; }
疑似要素の処理段階において，文書ツリーは変更されません。特にスタイルで生成された内容が，たとえば文書の再解析の目的で，文書言語のプロセッサにフィードバックされる事はありません。すなわち，CSSの整形構造と文書ツリーとでは情報量に差違が生じます。
:first-line擬似要素は，段落内に整形されたテキスト先頭行（1行目）に特別なスタイルを施します。先頭行の長さは，表示域の幅やフォントサイズなどの様々な要因に依存します。この擬似要素に附属できるのは，ブロックレヴェル要素，inline-block，table-caption，table-cellのみ。
この疑似要素に適用されるプロパティは，次に限定されています：
CSS2.1適合のUAでは他のプロパティに適用してもよい，とされます。CSS2.0の場合HTML適合UAにおいて，セレクタ内に:first-line疑似要素が出現するすべての規則を無視してもよく，代りに適用されたプロパティの一部をサポートするだけでもよい，としています。
p.topic:first-line { background: red; }
:first-letter疑似要素は，印刷術では一般的な技法であるイニシャルキャップおよびドロップキャップとして用いられます。'float' の値が 'none' である場合はインライン要素（印刷術におけるイニシャルキャップ）に類似し，それ以外の場合はフロート要素（印刷術におけるドロップキャップ）に類似します。この疑似要素に適用できるのは，ブロックレヴェル要素，list-item，table-caption，table-cell要素のみ。
これは原則として先頭行の先頭文字に対して適用されるのですが，時には二文字以上にも適用され得ます。たとえば先頭の約物につづく文字，もしくは言語の慣習で特別の組合せに意味のある文字列も，:first-letter疑似要素内に含まれるべきです。
リスト項目の要素（'display: list-item'）に附隨する:first-letter疑似要素は，マーカーの後につづく主要ブロックボックス内の先頭文字へ適用されます。ただしリスト項目に 'list-style-position: inside' が宣言されているなら，UAは適用せずに無視するかもしれません。
この疑似要素に適用されるプロパティは，次に限定されています：
CSS2.1適合のUAでは他のプロパティに適用してもよい，とされます。CSS2.0の場合HTML適合UAにおいて，セレクタ内に:first-line疑似要素が出現するすべての規則を無視してもよく，代りに適用されたプロパティの一部をサポートするだけでもよい，としています。
h1:first-letter { font-size: 120%; }次例では，p要素に対して :first-line と :first-letter疑似要素を同時に適用させています：
p { color: red; font-size: 12pt; }
p:first-line { color: blue; }
p:first-letter { color: green; font-size: 200% }このようなスタイルの場合，:first-letter疑似要素は:first-line疑似要素の内部に生成されます。:first-line疑似要素に設定されたプロパティの値は:first-letter疑似要素に継承されますが，もし同じプロパティが設定されているなら，上書きされます。これらのスタイルでは，各p要素の先頭文字はフォントサイズが '24pt' で緑になり，先頭文字を除いた1行目の文字列は青になります。そして段落の残りは赤になります。
:before, :after疑似要素は，'content'プロパティと共に使用し，要素内容の前/後に生成内容を挿入します。
要素に生成されるオブジェクト（ボックスや画像）を整形する際には，生成内容もその要素の一部として扱われます。:before, :after疑似要素は自身に連結された要素から継承される凡ゆるプロパティの値を継承します。継承されないなら初期値を採ります。
CSS2仕様の適合UAではこれら疑似要素について，以降のプロパティを無視せねばなりません： 'position'プロパティ，'float'プロパティ，リストの各プロパティ，そして表の各プロパティ。さらに'display'プロパティについては，次にしめす条件において使用できます：
ただし，これらの記述はCSS2.1仕様では削除されており，適用対象の制約について述べていません。
次の規則はaccesskey属性を持つa要素の内容後方に，生成内容を挿入させています：
a[accesskey]:after {
text-transform: uppercase;
content: "<" attr(accesskey) ">";
}この規則が次のアンカーに適用されると，内容後方に <S> という文字列が挿入されます：
<p><a href="samp.html" accesskey="s">Sample</a></p>:first-letterまたは:first-lineとの組合せは，挿入内容も含めた先頭文字/先頭行に適用されます。
p.special:before { content: "Special! "; }
p.special:first-letter { color: purple; }