16.4.4. セレクタ

例で見たとおり、セレクタとして HTML の要素を用いることができます。しかし他にも要素の指定方法が色々あり、それらを利用すると CSS がより便利なものとなります。ここではセレクタの書き方をもっと詳しく説明します。

要素による指定 #

既にここまで用いましたが、要素名をセレクタとしてスタイルの指定を行うことができます。たとえば sample.css の冒頭にある

h1 { color: red; }

が要素によるスタイルの指定です。また、このページの style 要素内に

em { color: red; }

と書いておきましたので em 要素を使うと赤色で表示されます。実際にソースを見てみてください。

ソース

em で強調した部分が赤くなります出力

em で強調した部分が赤くなります

クラスによる指定 #

文章を書いていると、同じグループに属する単語が何度も登場することがよくあります。たとえば歴史に関する文章を書いているときは人名や地名が何度も登場します。他にも、学術に関する文章を書いていると論文の名前がいくつも出てきます。こういう時、同じグループに属するものに一斉にスタイルを指定したいと思うのはもっともなことです。

HTML 文書では要素に class 属性をつけることで、作者が自分で HTML の各要素に意味を持たせスタイルを指定することができます。

一つ例を見てみましょう。次の文章は 坂野潤治『近代日本政治史』 (岩波書店) の一節です。

版籍奉還が不徹底に終わったことは、明治政府内のテクノクラート層に、正面からの制度改革を一旦諦めさせた。大隈重信、大村益次郎、伊藤博文、井上馨らは、国内行政の中枢である大蔵、民部、兵部の三省を独占して、実際に近代化政策をすすめてしまう方針を採ったのである。

この文章の中には人名がいくつかあります。これらの人名に対して同時にスタイルを指定しましょう。まず人名を表すクラスの名前を決め、続けてスタイルを指定します。ここではクラス名を persons_name とし、このクラスに下線を引くことにしましょう。クラス名をセレクタにするには、クラス名の前にピリオド . をつけます。

.persons_name{ text-decoration: underline;}

これで persons_name クラスに下線が引かれるようスタイルを設定できました。あとは本文中において、人名の箇所を で囲めば OK です。

ソース

版籍奉還が不徹底に終わったことは、明治政府内のテクノクラート層に、正面からの制度改革を一旦諦めさせた。大隈重信、大村益次郎、伊藤博文、井上馨 らは、国内行政の中枢である大蔵、民部、兵部の三省を独占して、実際に近代化政策をすすめてしまう方針を採ったのである。出力

版籍奉還が不徹底に終わったことは、明治政府内のテクノクラート層に、正面からの制度改革を一旦諦めさせた。大隈重信、大村益次郎、伊藤博文、井上馨 らは、国内行政の中枢である大蔵、民部、兵部の三省を独占して、実際に近代化政策をすすめてしまう方針を採ったのである。

人名に下線が引かれました。このように、クラスをセレクタにすることで同じ種類のものに一斉にスタイルを指定できます。もし後でスタイルを変えたくなっても、CSS の記述を 1 箇所修正するだけで全てのスタイルが修正できます。

id による指定 #

ハイパーリンクのところでアンカーとして id 属性を使いましたが、id 属性の値をセレクタとしてスタイルを指定することができます。class 属性は同じ意味を持つ単語・段落などをグループ化する目的に使われるのに対し、id 属性は要素を一意に識別するためのもので、一つの文書中で異なる要素の id が重複してはいけません。

id をセレクタとして用いるには # をつけます。たとえば style 要素中に

#id0{ color: blue; }

と書いておくと、id0 という id を持つ要素が青色で表示されます。

ソース

この div は id0 なので青くなります。

要素名とクラス名の組合せ #

スタイル指定の際に、要素名とクラス名を組み合わせることができます。次のソースを見てください。

div.sample1{ background-color: black; color: white; }

このページのソースを見ると style 要素内にこれが書いてあります。この指定のもとでは class 属性の値が sample1 である div 要素のみが修飾されます。実際にやってみると、次のようになります。

ソース

普通に div 要素を使っても何もおきません。sample1 クラスの div 要素は修飾されます。sample2 クラスの div 要素は修飾されません。

複数のセレクタに対する一括指定 #

2個以上のセレクタに対して同じスタイルの指定をするときは、セレクタをカンマ区切りで並べることができます。たとえば

.sample3, strong{ font-size: x-small; }

とすると sampel3 クラスと strong 要素の両方の文字が小さくなります。

ソース

もちろん div 要素でなくても、sample3 クラスなら同じように文字が小さくなります。

ここは普通の文字サイズです。sample3 クラスは文字が大きくなります。もちろん div 要素でなくても、sample3 クラスなら同じように文字が小さくなります。

この辺は普通の文字サイズですが、strong 要素で囲った部分も文字が小さくなります。

下降セレクタと子セレクタ #

下降セレクタ #

HTML の要素の親子関係を使ってスタイルを指定することができます。一つ例を見てみましょう。

.sample4 q{ text-decoration: underline;}

と書いておくと、sample4 クラスの要素の子要素になっている q 要素に下線が引かれます。

ソース

普通に q 要素を使うとこんな感じです。一方 sample4 クラスの要素の子になっている q 要素には下線が引かれます。

このように

selector_1 selector_2{ ・・・ }

と書くと selector_1 の子要素である selector_2 にのみスタイルが適用されます。この記法を下降セレクタといいます。なお、今の例では q 要素が sample4 の要素の直接の子要素でしたが、孫要素に対しても下降セレクタは有効です。

ソース

p タグが sample4 クラスの要素と q 要素の間に挟まっても、相変わらず q 要素には下線が引かれます。

子セレクタ #

下降セレクタを用いると子要素、孫要素、…全てにスタイルが適用されてしまいます。そうではなく「直接の子要素」のみにスタイルを指定したい場合は、子セレクタを用います。子セレクタは次の例のように selector1 > selector2 という形で記述します。たとえば

.sample5 > .sample6 { color: red;}

と書くと、sample5 クラスの要素の直接の子要素である sample6 クラスの要素にのみスタイルが適用されます。

ソース

こっちは赤色になります。しかしこっちは直接の子要素でないので赤色になりません。

疑似クラスと疑似要素 #

ここまでで説明したセレクタでは指定しづらい、あるいは指定できないものに対してスタイルを指定するため、CSS では擬似クラス・擬似要素というものが用意されています。

リンク疑似クラス #

ほとんどのウェブブラウザにおいてハイパーリンクは下線付きの青い文字で表現され、リンク先を訪れると色が変化します。この「訪れる前のリンク」「訪れた後のリンク」を表すのが :link, :visited です。:link、:visited をクラスのように扱ってスタイルを指定すると、訪れる前および訪れた後のリンクに対してスタイルの指定ができます。たとえばソースに

.sample7 a:link{ color: red;} .sample7 a:visited{ color: green;}

と書くと、sample7 クラスの子要素であるリンクは訪れる前が赤色、訪れた後が緑色で表示されるようになります。押してみてください。

ソース

はいぱーワークブック出力

はいぱーワークブック

なおリンク擬似クラスを使うときは、ウェブページを見る人を混乱させないように注意してください。たとえば

.sample8 a:link, .sample8 a:visited{ color: black; text-decoration: none;}

とスタイルを指定すると、リンクの貼られた文字とそれ以外の文字の区別が付かなくなってしまいます。

ソース

こう見えても実はリンクなんです出力

こう見えても実はリンクなんです

リンクに関するスタイルがデファクト・スタンダードとして統一されている以上、下手にスタイルをいじらないほうが良いでしょう。

ダイナミック疑似クラス #

「現在選択中の要素」「マウスが上にある要素」「フォーカスのある要素」を、それぞれ :active , :hover , :focus という擬似クラスで表します。フォーカスのある要素というのは、入力状態にあるテキストボックスなどのことです。これらを用いると、少しですが動的な表現ができるようになります。たとえば

.sample9:hover { color: red }

とすると、クラスが sample9 要素の上にマウスが来たときに文字が赤く変化します。

ソース

ここにマウスカーソルを乗せると赤くなります出力

ここにマウスカーソルを乗せると赤くなります

:first-line, :first-letter 疑似要素 #

要素名の後ろに :first-line, :first-letter を続けて書くと、それぞれ要素の 1 行目、1 文字目のスタイルを変えることができます。たとえばこのページの style 要素内には

.sample10:first-line{ font-weight: bold; }

と書いてあります。これを念頭に置いて、下の例を見てください。

ソース

この 1 行目だけは太字で表示されますが
2 行目は普通の太さで表示されます。
3 行目以降も普通の太さです。

この 1 行目だけは太字で表示されますが

2 行目は普通の太さで表示されます。

3 行目以降も普通の太さです。

こうして :first-line 疑似クラスを使うと 1 行目のスタイルだけを指定できます。また :first-letter 疑似クラスを使えば 1 文字目のみのスタイルを指定できます。たとえば次のように使います。

ソース

In January of 1954 a talented young mathematician at the University of Tokyo paid a routine visit to his departmental library. Goro Shimura was in search of a copy of Mathematische Annalen, Vol. 24. In particular he was after a paper by Deuring on his algebraic theory of complex multiplication, which he needed in order to hepl him with a particularly awkward and esoteric calculation.

この文書は Simon, Singh, 1997, Fermat’s Enigma (Anchor Books [Random House] edition) から引用したものです。