植字擬似要素は，パラグラフなどのブロックが整形されたときの“1 行め”または“1 文字め”を要素とみなし，特にスタイルを適用させるものである。文書がどう整形されるかは，読者の環境によるところが大きい（1 行めがどこまでかは，読者のブラウザのフォントサイズの設定およびウィンドウ幅などによっていかようにも変わる）。これを文書のソース中に書き込むことはできないから，“擬似的な要素”とみなして解決するのである。

　擬似要素は，擬似クラスと同じく，先頭にコロン「:」を冠している。

:first-line
:first-letter

　これらはセレクタ中で，

P:first-line { ...... }
P:first-letter { ...... }

のように使われる。端的には，前者は“P 要素が整形されたときの 1 行め”，後者は“P 要素が整形されたときの 1 文字め”に適用される。

　当然，もっと複雑なセレクタで使用することもできる。

DIV.article P.headline:first-line { ...... }

ただし，これらの擬似要素はセレクタの末尾でなければならず，“P:first-line EM”のように擬似要素の後にさらにセレクタが続いてはならない。

　なお，植字擬似要素はブロックボックスを描く要素（display プロパティが block，list-item，compact，run-in（および table）の要素）にのみ適用される。

　ちなみに，これら 2 つの擬似要素に関する指定は，無視されても CSS としては正しい実装である。

　:first-line 擬似要素は，整形されたブロックの 1 行めに対して特別にスタイルを適用させるものである。

　:first-line 擬似要素には，適用可能なプロパティが限られている。これを，以下に示す：フォントに関するプロパティ，色に関するプロパティ，背景に関するプロパティ，ならびに，word-spacing プロパティ，letter-spacing プロパティ，text-decoration プロパティ，vertical-align プロパティ，text-transform プロパティ，line-height プロパティ，text-shadow プロパティ，および，clear プロパティ。

　:first-line 擬似要素の例をご覧いただこう。

P { font-family: Arial, Helvetica, san-serif; line-height: 130%; color: #000; }
P:first-line { font-variant: small-caps; color: #006; }

<P>Argon (Ar) is discovered by Lord Rayleigh and Sir William Ramsay in 1899. The name comes from the Greek argos, 'inactive'.</P>
<P>Argon is chemically inactive gas, colorless and has no smell. About 1 percent of the atomosphere is made up from argon. Its element number is 18 and its atomic weight is 40. Because of its inactive characteristic, argon is used for tube light.</P>

表示領域の幅を変えるなどして，“整形された 1 行め”にスタイルが適用されていることを確認されたい。

　一方，:first-letter 擬似要素は，整形されたブロックの（原則的に）1 文字めに対して特別にスタイルを適用させるものである。

　この :first-letter 擬似要素にも，適用可能なプロパティは限られている。適用されるのは，フォントに関するプロパティ，色に関するプロパティ，背景に関するプロパティ，text-decoration プロパティ，vertical-align プロパティ（ただし，float プロパティが none のときのみ適用可能），text-transform プロパティ，line-height プロパティ，マージンに関するプロパティ，パディングに関するプロパティ，枠に関するプロパティ，float プロパティ，text-shadow プロパティ，および，clear プロパティである。

　同様に例をご覧いただこう。

P { font-family: Verdana, Arial, Chicago, san-serif; line-height: 130%; color: #000; clear: both; }
P:first-line { font-variant: small-caps; color: #006; }
P:first-letter { font-size: 190%; border: thin solid #009; float: left; padding: 0.1em; margin-right: 0.1em; }

　:first-line 擬似要素と同じ例に対して適用させる。

:first-letter 擬似要素は，float プロパティと組み合わせることで 1 文字めを大きくし，後続する文章を回りこませるドロップキャップの効果を実現できる。

　また，上記の例からもわかるように，:first-letter 擬似要素に含まれる文字（列）は，:first-line 擬似要素にも含まれている（藍色で表示されている）。

　さて，:first-letter 擬似要素には原則として最初の 1 文字が属すると述べたが，これが，2 文字以上を含むこともある。要素の先頭の文字が，引用符「"」などの約物の場合，約物でない最初の文字までが，:first-letter 擬似要素に属することになる。

　前掲のスタイルシートで，次の HTML を出力させてみよう。

<P>"Neos" is a greek word which stands for "new". You know, the element name of Neon (Ne) is derived from the word. Neon was discovered by Sir William Ramsay and M. W. Travers in London in 1898.</P>

文頭の 2 文字が，:first-letter 擬似要素に属していることがわかる。