CSSでは様々な表現ができますが、疑似セレクタを使うことにより、より複雑でリッチな表現が可能となります。
疑似セレクタとは「疑似クラス」と「疑似要素」の総称で、セレクタの後ろに記述することにより効果を発揮します。
疑似クラスについて
疑似クラスとは、「特定のスタイルの、子セレクタのみにスタイルを適用したい」場合に利用されます。
例えば、「覚えておきたいCSSの一覧」の、「リンク色の変更と装飾」で学習した「a:link」「a:visited」「a:hover」「a:active」なども、疑似クラスに分類されます。
疑似要素
疑似要素は、例えば「このテキストの1行目にだけ、スタイルを適用したい」といった、より狭い範囲にスタイルを適用する場合に利用されます。
主な疑似要素として、「:first-line」や「:first-letter」「:before、:after」などがあります。
疑似セレクタの記述方法
疑似セレクタを使うには、セレクタに続いて疑似セレクタを記述します。
[CSSの記述例]p:first-child { ← セレクタに続き、疑似セレクタを入力
color:#F00;
}
color:#F00;
}
セレクタ（p）に続き、:first-childの疑似セレクタを入力します。
これにより、疑似セレクタの様々な効果を得ることができます。
覚えておきたいポイント
なにかと便利な擬似セレクタ
疑似セレクタを使えば、より複雑で動きのあるページや文字表現が可能です。
ちなみに、さきちんWEBでも擬似セレクタを使って画像の説明書きを表示しています。
