CSS3になりCSSでデザインできることが大幅に増えました。

「:before」と「:after」を使うと、今まで画像を使わなければならなかったデザインがCSSだけでできてしまったりします。

今回は擬似要素について詳しく調べてみました。

擬似クラス・擬似要素とは

CSS2までは擬似クラス・擬似要素と言っても「a:hover」「a:link」「a:visited」で使うぐらいだったのであまり意識することはありませんでした。CSS３からはかなり数が増えています。

擬似クラス・擬似要素の意味を確認してみます。

擬似クラス・擬似要素とは

疑似クラス（pseudo-classes）とは要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。
例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。 ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。

一方、擬似要素（pseudo-element）とは、 要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。 例えば、要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来ます。

擬似クラスと擬似要素の違いが分かりにくいですが、 疑似クラスは要素全体が対象になるのに対して、 疑似要素は要素の一部分だけが対象になる点が異なります。
引用：
HTMLクイックリファレンス　セレクタの種類

擬似クラスっていうのは「状態」と覚えておくと解りやすいですね。
「a:visited」「a:hover」など、訪問済みの状態、マウスオーバーされている状態などです。

擬似要素は要素の一部にスタイルを設定するものと覚えておきましょう。

擬似クラス・要素を使いこなせればデザインに富んだサイトが作れるようになります。

[table id=8 /]