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

:hover疑似クラスの例

:hover疑似クラスの例

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


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

: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疑似クラスの例

:first-child疑似クラスの例

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

このように、単純に要素名を指定するだけでは対象を特定できないような要素を対象にして、柔軟にスタイルを適用できます。
  • :first-child :最初の子要素として登場する場合のみに適用
  • :last-child :最後の子要素として登場する場合のみに適用
  • :only-child :唯一の子要素として登場する場合のみに適用
  • :first-of-type :同要素の中で、最初の子要素として登場する場合のみに適用
  • :last-of-type :同要素の中で、最後の子要素として登場する場合のみに適用
  • :only-of-type :同要素の中で、唯一の子要素として登場する場合のみに適用
:nth-child疑似クラスを使って、リスト項目を交互に装飾した例

:nth-child疑似クラスの例

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

単純に「2番目」や「3番目」と番号を指定できるだけでなく、「2の倍数」・「3の倍数」のような倍数や、「1~5番目のみ」・「6番目以降」のような複雑な指定も簡単にできます。
  • :nth-child(n) :先頭から「n番目」の子要素として登場する場合のみに適用
  • :nth-last-child(n) :末尾から「n番目」の子要素として登場する場合のみに適用
  • :nth-of-type(n) :同要素の中で、先頭から「n番目」の子要素として登場する場合のみに適用
  • :nth-last-of-type(n) :同要素の中で、末尾から「n番目」の子要素として登場する場合のみに適用
  • :empty :子要素を何も持たない場合のみに適用
  • :root :ルート要素である場合のみに適用

否定疑似クラス

:not疑似クラスを活用して、無効化したボタン以外を装飾

:not疑似クラスの例

否定疑似クラスは、指定した条件を満たさないすべての要素を対象にして、スタイルを適用できる疑似クラスです。例えば、「a:not(#grape)」と書けば、grapeというIDが付けられたa要素『以外』のすべてのa要素を対象にしてスタイルを適用できます。
  • :not(xxx) :条件「xxx」が成立しない要素に対してのみ適用

 

リンク疑似クラス

:link疑似クラス・:visited疑似クラスの例

:link,:visited疑似クラスの例

リンク疑似クラスは、リンク先が「未訪問の場合」か「訪問済みの場合」かでリンクの装飾を分けられる疑似クラスです。CSS1から存在しており、たくさんのウェブサイトで活用されているでしょう。
  • :link :リンク先が未訪問の場合のみに適用
  • :visited :リンク先が訪問済みの場合のみに適用

 

ユーザアクション疑似クラス

:focus疑似クラスの例

:focus疑似クラスの例

ユーザアクション疑似クラスは、マウスやキーボードなどでユーザが操作した際の状況に応じてスタイルを適用できる疑似クラスです。これらを活用することで、ユーザが今どこを操作しているのかを明示して、分かりやすいインターフェイスを作ることができます。
  • :hover :要素の上にマウスポインタを載せた際のみに適用
  • :active :アクティブになった際のみに適用
  • :focus :フォーカスされている際のみに適用

 

ターゲット疑似クラス

:target疑似クラスの例

:target疑似クラスの例

ターゲット疑似クラスは、ウェブページの途中にあるアンカーに対してリンクされた際に、その「アンカーの存在する要素」にスタイルを適用できる疑似クラスです。これを活用すると、ページ内のどの部分へ直接リンクされたのかが分かりやすくなります。
  • :target :URLで参照先になっている場合のみに適用

 

言語疑似クラス

言語疑似クラスは、指定した言語で記述されている(lang要素を使って言語名が指定してある)場合のみにスタイルを適用できる疑似クラスです。
  • :lang(xxx) :lang属性値が「xxx」である場合のみに適用

UI要素状態疑似クラス

:check疑似クラスの例

:check疑似クラスの例

UI要素状態疑似クラスは、ユーザインターフェイスの状態に応じてスタイルを適用できる疑似クラスです。入力欄の有効・無効状態や、チェックボックスのON/OFF状態に合わせて装飾を変更したい場合に活用すると、分かりやすいフォームが作れます。
  • :enabled :要素が有効な場合のみに適用
  • :disabled :要素が無効な場合のみに適用
  • :checked :要素がチェックされている場合のみに適用
  • :indeterminate :要素の選択状況が不確定の場合のみに適用


 
このように、疑似クラスを使えば、要素名だけでは指定しきれないような細かな条件を使って、スタイルの適用対象を絞り込むことができます。

それでは、疑似クラスの書き方を順に見ていきましょう。まずは、構造上の疑似クラスからご紹介致します