擬似クラス

　擬似クラスは、ここまでに紹介してきた主としてHTMLツリー構造に関連したセレクタではなく、特定の状態にある要素を選択するためのセレクタである。擬似クラスを利用することで、たとえば、訪問済みのリンクにスタイルを指定して表示色を変えるといったことができる。

　セレクタは、要素名と擬似クラスをコロン「,」でつないで記述する。

<<アンカーに関する擬似クラス>>
　ユーザの操作によって変化するリンクの状態に対して、スタイルを設定するための擬似クラス。以下の例の場合、訪問済みのリンクの表示色を設定している。

●訪問済みリンクに対するスタイル設定

a:visited { color : pink }

　a要素に対して設定可能な擬似クラスについて、次の表にまとめた。

■訪問済みリンクに対するスタイル設定

　※CSS2では、:hover擬似クラスとactive擬似クラスは、任意の要素に対して指定することができる。

<<first-child擬似クラス>>
　指定した親要素の中で指定した子要素が最初に出現する場合にマッチさせるための擬似クラス。以下の例の場合、div要素に続いてp要素が設定されている場合にマッチする。

<<first-child擬似クラス>>

div > p : first-child { color : red }

　この場合、以下のリスト（１）のp要素にはマッチするが、リスト（２）のp要素にはマッチしない。

（１）first-child擬似クラスにマッチする場合

<div class="memo">
    <p>ここでは注意すべき点について、説明します。
    ・
    ・
    ・

（２）first-child擬似クラスにマッチしない場合

<div class="main">
    <h2>妖怪とは？</h2>
    <p>
        このページでは、妖怪という不思議な存在（あるいは非存在）について考えてみたいと思います。
        ・
        ・
        ・

<<lang擬似クラス>>
　:langは、指定した要素の言語によって、スタイルを適用するための擬似クラス。

●:lang擬似クラスの例

p : lang(fr) { font-style : oblique }

●HTMLの例

<div lang="fr">
    <p>Conditions de fabrication des chaussures</p>

　ちなみに、これは属性セレクタによる設定と同じ意味を持っている。

●属性セレクタによる例

p [ lang : fr ] { font-style : oblique }

　※擬似クラスには、このほかに、form要素のコントロールであるtextarea要素などにフォーカスされた際にスタイルを適用する :focus擬似クラスがある。

最終更新：2007年05月23日 11:50

wicky @ ウィキ