CSSに慣れてくると、「この要素のこの部分にだけスタイルを適用したい」なんて場合がでてきます。
例えば、「.sample」というスタイルを作ったとします。
[サンプルCSS]color:#00F;
}
これをそのまま使うと、<div class="sample"></div>で囲まれた範囲内の文字色がすべて#00Fになってしまいます。
[サンプルHTML]<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>子孫セレクタの設定</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="sample">
●<p>テキストテキスト</p>
●<ul>
●<li>リスト</li>
●<li>リスト</li>
●<li>リスト</li>
●</ul>
●<p>テキストテキスト</p>
</div>
●の範囲の文字色が全て#F00になってしまいます。
</body>
</html>
そこで、「.sample」に子セレクタを追加し、「.sample」の中の<li>だけを違う色に変更してみます。
ちなみに、ベースとなるスタイルにセレクタを追加する親子のような関係から、子セレクタと呼ばれています。
覚えておきたいポイント
子セレクタを使いこなそう！
子セレクタを上手に使えば無駄なスタイルを作らずにすみ、コードもスッキリと軽くなります。
また、よく使われるテクニックの1つでもありますので、使いこなせるように練習しましょう！
