CSSをもう少し詳しく理解する
第7回でCSSの基礎的な内容を紹介したが，CSSにはもっと多くの機能がある． 本ページではそうしたCSSの応用的な内容について解説する． 尚，このページの内容は CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ の内容をベースに，一部を抜き出した物なので，より詳しい内容を知りたい場合はそちらを参照すること．
クラスの使い方についてもう少し詳しく
良いCSSを書くためには，CSSクラスの理解が不可欠である．本説では特に子孫セレクタと複数クラスの同時指定について解説する．
子孫セレクタ
第7回の内容では，セレクタにはタグ名やクラス，idを指定することができると解説した． しかし，もっと細かい条件でセレクタを指定することが可能である． 例えば，第7回で，重要な文字列をハイライトしたい時に使うクラス「important」を定義するには以下のように指定した．
/* 重要な部分を強調 */
.important {
font-weight: bold;
color: red;
}
上記の記述により「class="important"」を付けたタグの中は赤色太字になる． しかし，ここで作った「important」クラスは，HTML全体に適用される．例えば，headerタグ内でもarticleでも， とにかくimportantクラスを指定すると前述のスタイルが適用されてしまう．
通常はこのような挙動で問題は無いのだが， デザイン上header内とarticle内でimportantクラスのスタイルを変えたいと思ったときに問題が生じる． 例えば，header領域の背景色が黒で，article領域の背景色が白だった場合，強調させたい時には別の色を用いたい場合が あるかもしれない．また，表示するフォントサイズなども適宜変更したいという場合があり得る．
この場合，これまでやってきた方法で対応しようとすると，header用とarticle用の 二つのクラスを以下のように定義することになる．
/* header用重要な部分を強調 */
.important_header {
font-weight: bold;
color: blue;
}
/* article用重要な部分を強調 */
.important_article {
font-weight: bold;
color: red;
}
こうすると，header用とarticle用のクラスが別の名前になるので，header内で重要な部分には 「class="important_header"」を使い，article内には 「class="important_article"」を用いれば良い． しかし，この対応方法だと，さらにナビゲーション部分やフッタ部分で同じことをやろうとしたときに， クラス名がどんどん煩雑になっていってしまうという問題がある．
これを解決するのが 子孫セレクタ である． 子孫セレクタは，セレクタの対象を「XXX内のYYY」という形で絞り込んでいくことができる． 子孫セレクタを指定するには，セレクタ部分にスペースを空けて親から子に向かって記述していけば良い． 具体的には以下の通りである．
/* header内の重要な部分を強調 */
header .important {
font-weight: bold;
color: blue;
}
/* article内の重要な部分を強調 */
article .important {
font-weight: bold;
color: red;
}
一つ目は「headerタグ内のimportantクラスに対するセレクタ」であり， 二つ目は「articleタグ内のimportantクラスに対するセレクタ」を意味している． よって，同じimportantクラスを指定しても，そのタグがどこにあるのかで別のスタイルを 参照する．
<!-- html,headタグは省略 -->
<body>
<header>
headerエリア．<span class="important">
この部分がimportantクラスで強調されている
</span>
</header>
<article>
articleエリア．<span class="important">
この部分がimportantクラスで強調されている．
</span>
</article>
<footer>
footerエリア．<span class="important">
この部分がimportantクラスで強調されている.
マッチするセレクタが無いので見た目は変わらない
</span>
</footer>
</body>
サンプルコード
子孫セレクタは上記の様なシチュエーションの他にも，細かくセレクタを指定することで，そのスタイルが HTMLのどこで使われているかを見やすくするという利点もある． 必要がなければ特に使いこなさなくても良いが，世の中で配布されているテンプレートでは 当たり前の様に使われているので，それらを改変する時には上記の知識が必要である．
複数クラスの同時指定
属性にクラス名を記述する際，同時に複数のクラスを指定することができる． 複数クラスを指定する際は，クラス名を指定する際にスペースを空けてクラス名を記述していく． 以下にサンプルを示す．
/* 太字にするだけのクラス */
.bold {
font-weight: bold;
}
/* 赤字にするだけのクラス */
.red {
color: red;
}
<body>
<article>
<p>
ここはなにもクラス指定なし
</p>
<p class="bold">
boldクラスのみ指定
</p>
<p class="red">
redクラスのみ指定
</p>
<p class="bold red">
bold, redクラスを両方指定
</p>
</article>
</body>
サンプルコード
このように，複数クラスの同時指定をうまく利用すると，スタイルシートの重複を避けたり， HTMLファイルの見通しがよくなったりするので，うまく活用できるところでは活用すると良い．