CSS(カスケーディングスタイルシート)での主なセレクタ。

CSS(カスケーディングスタイルシート)でスタイルの指定対象要素を指定するセレクタについて、主なものについて解説します。

全称セレクタ。

全称セレクタ, 或いは汎用セレクタとは、全ての要素を指定対象とするセレクタです。

全称セレクタは * で記述されます。

全称セレクタの特徴として、CSSで最も弱いセレクタと言うのがあります。

つまり、全称セレクタでのスタイル定義は、その他のあらゆるセレクタでのスタイル定義で上書きされると言う事になります。

仮令全称セレクタでのスタイル定義を後に書いても、その他のセレクタでスタイル定義されている要素を上書きする事は出来ないと言う事にもなります。

全称セレクタは、主に基本となるスタイルを指定するのに用います。

例えば、基本として背景色を白、前景色を黒とする場合、全称セレクタを用いて以下のように記述出来ます。

* {
    background: #fff;
    color: #000;
    …
    }

この全称セレクタに依るスタイル定義は、他のセレクタで特定される要素では常に上書きされる事となります。

要素セレクタ(型セレクタ)。

要素セレクタ, 或いは型セレクタとは、要素名で指定したセレクタです。

HTML 5 では、要素名は半角であれば大文字でも小文字でも良い事となっておりますが、それより前の世代の規格の影響で、要素セレクタも半角小文字で書く事が多くなっております。

例えば、<h1>要素(第一等級見出し)と<h2>要素(第二等級見出し)を通常の二文字分の文字サイズとしたい場合、以下のように記述出来ます。

h1, h2 {
    font-size: 200%;
    …
    }

クラスセレクタ。

クラスセレクタとは、HTMLでの class 属性の値、すなわちクラス名で指定したセレクタです。

クラスセレクタには、クラス名の前に . を付けます。

全称セレクタや要素セレクタに続けてクラスセレクタを記述する事で、これらのセレクタで指定される要素のうち特定のクラス名を持つ要素だけをスタイル適用対象に指定する事も出来ます。

  • 但し、全称セレクタの直後にクラスセレクタを書いたものは、クラスセレクタだけを書いたものと全く同じ効力となります。
  • 他のセレクタに続けてクラスセレクタを書く場合には、そのセレクタとクラスセレクタの間に空白などは入れないようにしてください。

例えば、<p>要素(段落)のうち、特にnoteクラス名を与えられたもの(すなわち<p class="note">要素)だけ、通常の文字の0.8倍の文字サイズとしたい場合、以下のように記述出来ます。

p.note {
    font-size: 80%;
    …
    }

また、要素名を問わず、特にnoteクラス名を与えられたもの(すなわち class="note" 属性を与えられた任意の要素)について、赤い文字で表示させたい場合、以下のように記述出来ます。

.note {
    color: #ff0000;
    …
    }

擬似クラスセレクタ。

擬似クラスとは、HTMLでのマークアップが困難か不可能な特定の状況をクラス名に見立てたものです。

いくつかありますが、ここではリンク擬似クラスと動的擬似クラスの一部を解説しましょう。

リンク擬似クラスセレクタ。

リンク擬似クラスとは、アンカーの状況に応じて指定される擬似クラスです。

従って、アンカーとなる要素で無いと意味がありません。

HTMLでは href 属性を与えられた<a>要素に対するセレクタとなります。

リンク擬似クラスとしては、以下の二つがあります。

未訪問リンク
まだ開いていないリンクのアンカーで、CSS では :link 擬似要素セレクタで指定出来ます。
訪問済みリンク
既に開いているリンクのアンカーで、CSS では :visited 擬似要素セレクタで指定出来ます。

例えば、未訪問リンクは緑で、訪問済みリンクは黒で表示させる場合、以下のように記述出来ます。

a:link {
    color: #080;
    …
    }

a:visited {
    color: #000;
    …
    }

動的擬似クラスセレクタ。

動的擬似クラスとは、マウスカーソルが乗るなどの状況に依り動的に適否が変動するセレクタです。

ここでは主なものとして、以下の二つを挙げておきましょう。

:hover 擬似クラス
マウスカーソルが乗っている状態を対象とします。
:active 擬似クラス
マウスカーソルが乗っていて、クリックなどでその要素が指定されている状態を対象とします。

例えば、アンカーにカーソルが乗っているでは背景を薄緑色の黒文字で表示させる場合、以下のように記述出来ます。

a:hover {
    background: #efe;
    color: #000;
    …
    }

リンク擬似要素セレクタと動的擬似要素セレクタを併用する場合の注意事項。

リンク擬似クラスと動的擬似クラスを併用する場合、必ずリンク擬似クラスから先に書いてください。

これはセレクタの解釈上の問題に依るものです。

例えば、未訪問リンクがクリックされている状態について、

a:active:visited

と言うセレクタでは無効となってしまう恐れがありますが、

a:visited:active

と書けば問題はありません。

一意セレクタ(IDセレクタ)。

一意セレクタ, 或いはIDセレクタとは、HTMLでの id 属性で与えられた ID で指定するセレクタです。

一意セレクタには、IDの前に # を付けます。

全称セレクタや要素セレクタに続けて一意セレクタを記述する事で、これらのセレクタで指定される要素のうち特定のIDを持つ要素だけをスタイル適用対象に指定する事も出来ます。

  • 但し、全称セレクタの直後に一意セレクタを書いたものは、一意セレクタだけを書いたものと全く同じ効力となります。
  • 他のセレクタに続けて一意セレクタを書く場合には、そのセレクタと一意セレクタの間に空白などは入れないようにしてください。

例えば、<h2>要素(第二等級見出し)のうち、特にAPPENDIXと言うIDを与えられたもの、すなわち<h2 id="APPENDIX">要素にだけ、通常の文字の1.0倍の文字サイズとしたい場合、以下のように記述出来ます。

h2#APPENDIX {
    font-size: 100%;
    …
    }

下位セレクタ(子孫セレクタ)。

下位セレクタ, 或いは子孫セレクタとは、ある要素の下位にある要素を指定するセレクタです。

下位セレクタとするには、上位要素のセレクタと対象となる要素のセレクタの間に半角空白を入れます。

上位要素のセレクタ及び対象となる下位要素のセレクタには特に制限はありません。

例えば、class="note" 属性で note クラス名を与えられた任意の要素の下位にある<em>要素(強調)についてのみ、直立体の赤い細字で表示させたい場合には、以下のように記述出来ます。

.note em {
    font-style: normal;
    font-weight: normal;
    color: #f00;
    …
    }