表現が広がる！疑似要素・疑似クラス一覧[CSS1&2編]-WordPressラボ

この基本、見落としてない?！

疑似クラスと疑似要素って、何が違うの？

まずは、疑似クラスと疑似要素の違い。。。
まぁ別に、言葉が違うだけ。で片付けてしまっても問題ないのですが、せっかくなので定義しておきましょう。

疑似クラスとは？

ある要素が特定の状態であるときに、スタイルを指定するセレクタのこと。

特定の状態というのは、リンクが貼られている状態とかマウスオーバーしている状態といったことを指します。

疑似要素とは？

ある要素の中にある特定の文字や行に対して、スタイルを指定するセレクタのこと。

例えば、>p<の中にある最初の一文字や、最初の一行といった風にです。

それでは、まずCSS1レベルや2レベルで定義されている疑似クラス達から見ていきましょう。

リンク疑似クラス

E:link および E:visited

<a>タグに使用されることでおなじみの疑似クラス。
E:linkは未訪問のリンクに対して、E:visitedは訪問済みのリンクにスタイルを指定します。

CSSとHTMLの例は、以下のとおりです。

ダイナミック疑似クラス

E:hover および E:active および E:focus

ダイナミック疑似クラスは、指定された要素に対する特定のアクション時に適用されます。

E:hoverはマウスオーバー時、E:activeはクリックしてから放すまでの間について、スタイルを指定します。

E:focusはフォーカス時、例えばテキストボックスの入力可能状態時などのスタイルを指定します。

first-child疑似クラス

E:first-child

first-child疑似クラスは、ある要素内で最初に書かれている子要素にスタイルを適用します。
実際に:first-childを付与記述するのは、子要素に対してであることに注意が必要です。

<ul>タグと<li>タグがあったら、liに付けるみたいに覚えておきましょう。

さて、疑似クラスを見てきましたが、ここからは疑似要素（＝特定の文字や行に対してスタイル指定するセレクタ）になります。

first-line疑似要素

E:first-line

ffirst-line疑似要素は、指定した要素の一行目のテキストにスタイルを適用するセレクタになります。

first-letter疑似要素

E:first-letter

first-letter疑似要素は、指定した要素の一文字目のテキストにスタイルを適用します。

before疑似要素

E:before

before疑似要素は、指定した要素の直前にcontentプロパティで指定した内容を出力します。
また、出力された内容にスタイルを指定することも可能。CSSとHTMLの例は下記です。

after疑似要素

E:after

after疑似要素は、指定した要素の直後に、contentプロパティで指定した内容を出力します。
もちろん、出力された内容にスタイルを指定することも可能です。

ちなみにclearfixは、このafter疑似要素を活用した技術です。

以上が、CSS1と2の疑似要素・疑似クラス一覧の紹介となります。

ちなみに、超基本的なセレクタ達については、【初心者対象】超基礎的なCSSセレクタの種類一覧の記事、属性セレクタは【サンプル有】入門からCSS3まで！属性セレクタリファレンスの記事にて紹介しています。

次回は、CSS3のものを解説する予定です。

Tags

css