擬似クラスと擬似要素CSSでデザインをみなさん進めていくうえで普通に使っていると思いますが、擬似クラスは使っていたのですが、擬似要素は正直、よくわからなかったので避けていました。これを使えるようになると格段にホームページのデザインの幅が広がったので、すでにご存知の方がほとんどでしょうが、改めて書いてみたいとおもいます。

擬似クラスとは

擬似クラスとはセレクタに付けるキーワードで指定した要素が特定の状態にある時にスタイルを適用します。例えば< a> 要素でよく使われるのが:link（未訪問時のスタイル）や:hover（マウスホバー時のスタイル）:visited（訪問済みのスタイル）などこれ以外にも様々な種類があります。

また、< li> などに使う擬似クラスでli:first-childやli:last-childでリストの一番最初や最後の要素にスタイルをつける、li:nth-child(2)でリストの2番目の要素に適用するスタイル、li:nth-child(even）で偶数のリストに、(odd）で奇数に適用するスタイルなど使い勝手を覚えれば便利です。

例）li:nth-child(even)

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

擬似要素とは

擬似要素とは特定の文字や行に対してスタイルを適用するものです。擬似要素も様々な種類のものがあります。例えば:first-lineは最初の行にスタイルを適用、first-letterは最初の文字にスタイルを適用などありますが（ブロック要素のみ、インライン要素には使用できない）よく使われているものの代表で:beforeと:afterではないでしょうか。このbeforeとafterは特定の要素内（セレクタ）の前後にスタイルを適用します。指定する内容はcontentに記述します。文字を入れることもできるし、空白にしておいて文字以外の要素を加えることもできます。

例）

HTMLに文字を記述する必要はなく、CSSでサブタイトルを入力することができました。まあ、サブタイトルを擬似要素でいれることはないと思いますが、こういうこともできますよ、ということで。これのソースを見てみると以下のようになります。

「CSSでマウスホバー時のREAD MOREアニメーションを作る」の記事でも紹介していますが、リンクなどにも幅が広がります。

下記の例はcontent:''；になにも入れないパターンということで、メニューホバー時に現れるボーダーを作ってみました。HTMLにわざわざ入れたくないときは便利ですね。擬似要素にすることでテキストデコレーションと違い、幅や効果も自由に設定できます。

例2）

• メニュー1
• メニュー2