CSSのセレクタに関する事項

これまで、CSSのセレクタは、 「スタイルを適用する対象となるHTMLの要素名」であると説明してきましたが、 それを拡張したセレクタもあります。一つのHTMLファイル中で、 同じ要素名の要素が複数あるとき、 それぞれの要素で別のスタイルを使いたいときの対応がその一つです。

例えば、セレクタとして「p要素」を選び、 その見栄え(スタイル)を設定する例は前章で演習しましたね。 この方法では、「p要素」について設定を行なうと、 そのHTMLファイルで使われる p要素全体にその設定が適用されています。

これは、一つの設定をすることで、 HTMLファイル全体のスタイルを決めることができるので非常に便利です。ところが、 例えば次のような場合にはこのままでは対応できません。

以下のようにHTMLファイル中に2つの p要素があり、 一方は大きな文字で表示し、 他方は赤色の文字でかつ通常の大きさの文字で表示したい場合がその例です。

<p> 
  こちらのパラグラフは、大きな文字で表示したい。
</p> 
<p> 
  こちらのパラグラフは、赤色の文字でかつ通常の大きさの文字で表示したい。
</p> 

このとき、CSSの設定を以下のようすると、上記の2つのパラグラフとも、 大きな字なってしまいますし、

p {
  font-size: 1.5em;
}

上記の代わりに下記のようにすると、2つのパラグラフとも、文字の大きさは普通で、 文字の色は赤になってしまいます。

p {
  color: red;
}

そこで、同じ要素に対しても、あるときはこちらのスタイルを、 別のときには別のスタイルをという設定ができるようになっています。 それは、セレクタをHTMLの要素名に、 ピリオド(.)とclass名と呼ばれる任意の名前を付加した classセレクタで、 定義することで実現できます。以下が、classセレクタの一般的な記述例です。

要素名.class名  { プロパティ: 値; }

例えば、上記の p要素の例で、 この classセレクタを使って p要素に関する2つの定義をすると、 以下のようになります。

p.bigfont {
  font-size: 1.5em;
}

p.redchar {
  color: red;
}

この classセレクタで定義したスタイルをHTMLファイルで利用するには、 対応する要素の開始タグ中に、 class属性を付加し、 その値としてclass名を指定すれば良いのです。 以下に、classセレクタのHTMLファイルでの一般的な参照方法を示します。

上の例のHTMLファイルにおいて 上の2つのclassセレクタで定義した設定を適用するためには、 以下のようにHTMLファイルを変更すれば良いことになります。

<p class="bigfont"> 
  こちらのパラグラフは、大きな文字で表示したい。
</p> 
<p class="redchar"> 
  こちらのパラグラフは、赤色の文字でかつ通常の大きさの文字で表示したい。
</p> 

下の図がclassセレクタを適応する前と適用した後の例です。

前節で述べたように、classセレクタを使うことにより、 セレクタとして要素名にclass名を付加して、 同じ要素でも別のスタイルが指定できるようになります。

これを更に拡張して、あるスタイルを決めておき、 それを色々なHTML要素に対応させることができるようになっています。

それには、classセレクタで、要素名を省略するか、 要素名の代わりに「*」を記述することで対応できるようになっています。 これを、ユニバーサル セレクタ (universal selector)と呼びます。 つまり、以下のようにユニバーサルセレクタを使えば、 HTML要素に関係なく (すべてのHTML要素に対して) スタイルを決めることができます。

.class名  { プロパティ: 値; }   or   *.class名  { プロパティ: 値; }

ユニバーサル セレクタを参照するには、通常のclassセレクタと同じように、 HTMLタグにclass属性を付加します。

例えば、下のように 「bigf」というユニバーサル セレクタをCSSファイル中で定義しておけば、

.bigf {
  font-size: 1.7em;
}

以下のHTML文書のように、色々なHTML要素で、 「big_f」というスタイルを利用できるようになります。

<p class="bigf"> 
  こちらのパラグラフでは、大きな文字で表示したい。
</p> 
<blockquote class="bigf"> 
  こちらのblockquote要素も、大きな文字で表示したい。
</blockquote> 

classセレクタで定義されたスタイルを複数同時に指定 (参照) することにより、 複数のスタイルを組み合わせたスタイルをHTML要素に適応することができます。

それは、class属性の値として、 適用したい複数のclass名を空白で区切ってならべることでできます。 つまり、以下のようにすれば、n個のclassセレクタで定義されたスタイルを 組み合わせて利用することができます。

例えば、以前定義したように、下のようなセレクタをCSSファイル中で定義しておけば、

p.bigfont {
  font-size: 1.5em;
}

p.redchar {
  color: red;
}

以下のHTML文書のようにすると、フォントの大きさが通常の1.5倍 (1.5em)で、 文字が赤色のスタイルが適用されます。

<p class="redchar bigfont"> 
  このパラグラフは、赤色で、通常の1.5倍のサイズ(1.5em)の文字で表示されます。
</p> 

あるスタイルを、要素名ではなく、 「状況」に対して適用することができます。 これを「疑似クラス (pseudo class)」と呼びます。

疑似クラスは、一般的には、以下のようにしてスタイルを定義します。 疑似クラス名の前に「:(コロン)」がついていることに注意して下さい。

要素名.class名:疑似クラス名  { プロパティ: 値; }

class名を書かないと、対象とする要素全部に対するスタイル定義になります。 また、疑似クラスによっては、対象とする要素が決まっているもの (例えば、:link や :visited など) があります。 その場合は、スタイルを定義するときに、要素名も不要となります。

ここではリンクの色などに変化をつけることができる、 リンク疑似クラス (:link、:visited) と、 ダイナミック疑似クラス (:hover、:active、:focus) について説明します。

リンク疑似クラスは、文字どおり、 リンク(a要素)の表示スタイルを決めるための疑似クラスです。

:link 疑似クラス

未訪問リンク(未だ訪れたことの無いページへのリンク)の表現を定義します

:visited 疑似クラス

既訪問リンク(既に訪れたことのあるページへのリンク)の表現を定義します

リンク疑似クラスは、a要素のスタイルを決めるための疑似クラスなので、 定義するとき、要素名である a は、省略可能です。

例えば、以下のような疑似クラスをCSSファイル中で定義しておけば、 未訪問リンクは、赤色で表示され、既訪問リンクは、濃い青色で表示されます。
(この例では、要素名 aは、省略せずに書いていますが、省略可能です。)

a:link {
  color: red;
}

a:visited {
  color: darkblue;
}

ダイナミック疑似クラスは、 ユーザ(Webページ閲覧者)のマウス操作やキー入力に感応して表示を変える要素に対する スタイルをコントロールします。ただし、 これまで学習したHTML要素でこれに対応するのは、a要素しかないので、 今のところは a要素に対する疑似クラスと思ってもらっても結構です。

ダイナミック疑似クラスには、:hover、:active、:focusの3つがありますが、 それぞれの働きは、以下のようになっています。

:hover 疑似クラス

ある要素がマウスポインターなどで指し示されているが、 まだアクティブになっていない (クリックされていないなど) ときに適用されます。

:active 疑似クラス

ある要素がマウス操作などでアクティブになっているときに適用されます。 例えばユーザ(Webページ閲覧者)が、その要素上でマウスをクリックしたり、 Enterキーを押したりした後に、指を離すまでの時間がこれに相当します。

:focus 疑似クラス

ある要素がフォーカス(focus)されているときに適用されます。 例えばテキスト入力フォーム (文字を入力するボックス)が フォーカスされている (文字が入力できる状態になっている)場合などが これに相当します。

ダイナミック疑似クラスは、次のようにリンク疑似クラスとともに a要素に適用し、 リンクテキストの動作を定義するのが一般的です。

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: yellow;
}

上記の設定をしておくと、a要素の内容 (リンク文字) は、 以下のように文字の色が設定されます。

• まだ訪れたことの無いページはのリンク文字は、 青色に
• リンク文字の上にマウスポインターを置くとリンク文字は、 赤色に
• リンク文字上でマウスボタンを押し続けている間リンク文字は、 黄色に
• 一度訪れたページのリンク文字は、 紫色に

上記のスタイルを適用したHTMLページが、下のリンク先にあります。 下のリンクをクリックして、そのページを表示させて下さい。 サンプルページが表示したら、実際に、 マウスカーソルをリンク文字の上に移動したり、 その状態のままマウスボタンを長押ししたりして、 リンク文字の色の変化を体験して下さい。