CSSの書き方・子孫セレクタ
CSSのセレクタ部分の書き方のひとつです。たとえば次のようなHTMLがある場合にどのよう書くことができるかを示します。 この例のHTMLはリストを表すタグ<ul>と、その項目に当たる<li>です。
<ul class="sample">
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
このメニューに当たる部分の文字色だけ変えたいとき等に、liにclass等を指定する方法もありますが、次のように書くのを子孫セレクタと言います。
ul.sample li{
color:#333333;
}
ulとliの間は半角スペースです。これはul.sampleに含まれるliという書き方です。つまりある要素に含む子要素という形でスタイルを書くことができます。 このような書き方を活用するとむやみにidやclassを増やさなくてもいいので、スタイルシートもわかりやすくなります。
また例えば上の例でメニューごとの色を変えたいときなどいちいちliに色以外のスタイルまで書くのははんざつになります。 そういうときに子孫セレクタを活用するとスタイルシートの見通しがよくなります。たとえば次のようなHTML例の場合。
<ul class="sample">
<li class="mojired">メニュー</li>
<li class="mojiblue">メニュー</li>
<li class="mojigreen">メニュー</li>
</ul>
スタイルシートには次のように書きます。
ul.sample{
width:100px;
}
ul.sample li{
font-style:明朝;
font-size:14px;
}
.mojired{
color:#ff0000;
}
.mojiblue{
color:#0000ff;
}
.mojigreen{
color:#00ff00;
}
このスタイルシートを解説すると、最初のul.sampleでメニューの幅を指定しています。その次の子孫セレクタを使ったul.sample liでは色以外のフォントのスタイルを一括して指定しています。あとは文字色だけのclassが順に記述されています。 このように使い分けすることで、スタイルシートで同じことを何度も記述することも減らせるということです。
疑似クラス
CSSの中にはあらかじめ使い道の決められたクラスがあります。定義済みとも言われます。代表的なものとしてリンク関係があります。
a:link これは通常のリンクに対するクラス
a:visited これは通常のリンクの一度クリックして読みこんだ後に対するクラス
a:active これは通常のリンクのクリックした時のクラス
a:hover これは通常のリンクの上にマウスのカーソルが乗ったときのクラス
書き方の例は次のようになります。下のようにすると通常青いリンクの色が指定の色に変えられます。
a:link{
color:#333333;
}
よく使う例だと次のようにスタイルシートに記述しておくとマウスカーソルがリンクの上に乗ったとき文字色が変わります。 この場合は赤色（#ff0000）に変わります。 背景色や画像を切り替えることもできる便利なものです。
a:hover{
color:#ff0000;
}