CSSの「疑似クラス」の書き方再入門（CSS3対応版） [ホームページ作成] All About

細かく装飾対象を指定できる「疑似クラス」

:hover疑似クラスの例

様々なウェブサイトでよく使われている「疑似クラス」というと、リンク関連の装飾でしょうか。「:link疑似クラス」と「:visited疑似クラス」を使って、「未訪問リンク」と「訪問済みリンク」とで装飾を分けたり、「:hover疑似クラス」を使って、リンクの上にマウスが載ったときに装飾を変化させたりするデザインがよくあります。これらは、CSS1で定義されており、多くのブラウザで表示できます。

:first-of-type疑似クラスの例

疑似クラスの仕様は、CSS2・CSS3でも拡張されており、スタイルの適用対象として指定できる状況は、上記以外にもたくさんあります。例えば右図は、CSS3で追加された「最初の子要素に限定してスタイルを適用」できる、:first-of-type疑似クラスを使って、「最初に登場する段落」のみを特別な装飾にした例です。

今回は、前回の記事「CSSの「セレクタ」の書き方再入門（CSS3対応版）」に続いて、セレクタの書き方のうち、疑似クラスの書き方について、イチからご紹介致します。

疑似クラスの書き方

CSSでセレクタとして「p」とだけ書けば、HTML内のすべてのp要素を対象にして、指定したスタイルが適用されます。これは、前回の記事で解説した通りです。

p { プロパティ: 値; }

ここで、例えば:hover疑似クラスを使って「p:hover」のようにセレクタを書けば、p要素の上にマウスポインタが載っているときにだけ適用されるスタイルを作ることができます。

p:hover { プロパティ: 値; }

疑似クラスの書き方

このように、疑似クラスは、コロン記号「:」の後（右側）に続けて疑似クラスの名称を記述します。

コロン記号の前（左側）には要素名などを記述しますが、省略もできます。省略した場合は、ユニバーサルセレクタ「*」が指定されたと解釈され、（要素の種類を限定せずに）すべての要素が対象になります。以下の2行はどちらも同じ意味で、（どんな要素でも）マウスポインタが載ったときに文字色を赤色にします。

:hover { color: red; }
*:hover { color: red; }

なお、クラス名が付加されている要素に限定して、さらに疑似クラスを追加したい場合は、以下のように記述できます。ここでは、「forest」というクラス名が付加されたp要素を対象にして、:hover疑似クラスを追加しています。

p.forest:hover { color: green; }

さて、各「疑似クラス」についての詳しい記述方法を解説する前に、まずは本記事でご紹介する「疑似クラス」の一覧を、ジャンル別に掲載しておきます。

構造上の疑似クラス

:first-child疑似クラスの例

「構造上の疑似クラス」は、HTMLの構造を元にして適用対象を限定できる疑似クラスです。例えば、「最初の子要素」だけを適用対象にする「:first-child」疑似クラスを使うと、右図のように「リストの先頭項目」だけに特別な装飾を施すことができます。

このように、単純に要素名を指定するだけでは対象を特定できないような要素を対象にして、柔軟にスタイルを適用できます。

:first-child ：最初の子要素として登場する場合のみに適用
:last-child ：最後の子要素として登場する場合のみに適用
:only-child ：唯一の子要素として登場する場合のみに適用
:first-of-type ：同要素の中で、最初の子要素として登場する場合のみに適用
:last-of-type ：同要素の中で、最後の子要素として登場する場合のみに適用
:only-of-type ：同要素の中で、唯一の子要素として登場する場合のみに適用

:nth-child疑似クラスの例

「最初」や「最後」だけではなく、先頭から順番に数えて「n番目」に登場する子要素だけを適用対象にできる疑似クラスもあります。これらを使えば、右図のように、リストの各項目の装飾を1つおきに分けることもできます。

単純に「2番目」や「3番目」と番号を指定できるだけでなく、「2の倍数」・「3の倍数」のような倍数や、「1～5番目のみ」・「6番目以降」のような複雑な指定も簡単にできます。